在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
首先在head中加入如下代码:

1
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

针对上述viewport标签有如下说明
1)、content中的width指的是虚拟窗口的宽度。

2)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

3)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

4)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

5)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

一:CSS判断横屏竖屏

写在同一个CSS中

1
2
3
4
5
6
@media screen and (orientation: portrait) {
  /*竖屏 css*/
}
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

分开写在2个CSS中
竖屏

1
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏

1
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

一:JS判断横屏竖屏

01
02
03
04
05
06
07
08
09
10
//判断手机横竖屏状态:
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            alert('竖屏状态!');
        }
        if (window.orientation === 90 || window.orientation === -90 ){
            alert('横屏状态!');
        
    }, false);
//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。

HTML5如何做横屏适配的更多相关文章

  1. H5开发:横屏适配

    平常我们做过的需求里,主要是以竖屏式为主,而横屏式较少.对于竖屏式场景来说,大家的经验会比较丰富,因此,此次主要式探讨下横屏式场景下的一些需要注意的点,特别是怎样去做横屏适配. 对于 H5 横屏页面来 ...

  2. 【移动适配】移动Web怎么做屏幕适配(三)

    复杂纷扰的世界背后,总会有万变不离其宗的简单规则 啃先生 Mar.8th.2016 壹 | Fisrt 前面写了两篇移动适配相关的文章: <移动Web怎么做屏幕适配(一)>重点介绍了怎样利 ...

  3. Vant UI 组件库如何做rem适配?

    Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒.文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么V ...

  4. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  5. 【移动适配】移动Web怎么做屏幕适配(一)

    屏幕适配是一个很容易被忽略的问题,但对于精益求精的产品而言,是必不可少的.对于Web开发的求职者而言,也是一个必需要理解清楚的经典问题 首发于微信公众号(啃先生)  壹 | Fisrt 移动端适配的是 ...

  6. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  7. HTML5工具做屏幕自适应的两种方法

    近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设 ...

  8. 用Html5/CSS3做Winform,一步一步教你搭建CefSharp开发环境(附JavaScript异步调用C#例子,及全部源代码)上

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

  9. 用HTML5 Canvas做一个画图板

    使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 功能很简单,原理其实和拖放是类似的,主要是 ...

随机推荐

  1. 每人涨10%的工资,涨的前一共不超过5万,从低工资往高工资的人涨,超过5W则停止涨,问涨的钱花了多少,多少人获得了涨薪。

    ;with test(CID,money,NewAmount) as ( SELECT Row_Number() over ( order by money ) as CID ,money ,mone ...

  2. TensorFlow学习笔记(一)--windows系统安装配置

    1.关于Tensorflow 国际惯例,先来个总体的简要介绍,摘自一个很强大的TensorFlow中文学习网站(http://www.tensorfly.cn/)的简介 TensorFlow™ 是一个 ...

  3. webuploader 多图片上传

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件. 具体接口参考 webuploader接口文档地址 一.图片上传功能 ...

  4. 最新zencart支付宝插件(支持1.5)

    最新zencart支付宝插件(支持1.5) 最新zencart支付宝插件(支持1.5)   支付宝接口的兼容性真不错,时至今日还能用,想利用zencart来做国内时长还真是方便多了,朋友们可以试试. ...

  5. 002-启动spring boot应用

    一.idea启动. 1.在src目录里面找到启动类(包含主函数的类)DemoApplication,然后在该类里面右键,选择run DemoApplication.main,即spring boot应 ...

  6. Python编程题总结

    1 数学篇 1.1 斐波那契数列 def fib(n): if n in (0, 1): return n fib_n1, fib_n2 = 0, 1 for i in range(2, n + 1) ...

  7. SpringBoot入门学习(一)

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我 ...

  8. H5 动画:轨迹移动 | H5游戏 推金币

    https://aotu.io/notes/2017/11/06/path-animation/ https://aotu.io/notes/2017/11/06/coindozer/

  9. Python实例1—格式化输出

    老男孩教学学习笔记: 实例1:格式化输出 # Author:Alex Li name = input("name:") # raw_input 2.x input 3.x # in ...

  10. 【c++ primer, 5e】设计Sales_data类 & 定义改进的Sales_data类

    [设计Sales_data类] 1.考虑Sales_data类应该有那些接口. isbn.combine.add.read.print... 2.考虑如何使用这些接口. Sales_data tota ...