博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js判断手机的横竖屏调整样式
阅读量:6583 次
发布时间:2019-06-24

本文共 1641 字,大约阅读时间需要 5 分钟。

在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢。首先需要在head中加入如下代码:

<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中

css代码:

@media screen and (orientation:portrait){

       //竖屏css

}

@media screen and (orientation:landscape){

      //横屏css

}

注:css3媒体查询orientation    

        语法:orientation :   portrait    |    landscape        

        取值:  portrait:指定输出设备中的页面可见区域高度大于或等于宽度     //竖屏模式

                     landscape:除portrait值情况外,都是landsscape

参考:http://www.w3chtml.com/css3/properties/madia-queries/orientation.html

 

分开写在2个css中

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

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

 

 

二:js判断横竖屏

window.addEventListener("onorientationchange" in window? "orientationchange":"resize",function(){

   setTimeout(function(){

       if(window.orientation===0 || window.orientation===180){

             alert('竖屏模式')

         }

        if(window.orientation===90  ||  window.orientation===-90){

             alert("横屏模式")

         }

   },300)

},false);

注:orientationchange的兼容性

       移动端webapp监测屏幕旋转时时常用onorientationchange事件,用此事件获取改变后的屏幕尺寸需要注意:

       1).iphone,可立即获取改变后的屏幕尺寸。

       2).android,获取的尺寸是改变前的。需要设置setTimeout在一段时间后再获取。iScroll4是200ms,建议设成300ms.

 

转载于:https://www.cnblogs.com/liuqingxia/p/7569746.html

你可能感兴趣的文章
架构师的97种习惯
查看>>
PHP 开发 APP 接口 学习笔记与总结 - XML 方式封装通信接口
查看>>
IT基础架构规划方案之实际网络设计案例
查看>>
Navicat for MySQL 使用SSH方式链接远程数据库(二)
查看>>
poj 1274The Perfect Stall
查看>>
HDU 4720 Naive and Silly Muggles (外切圆心)
查看>>
垂死挣扎还是涅槃重生 -- Delphi XE5 公布会归来感想
查看>>
Ubuntu上运行Blender,在控制台上查看运行结果
查看>>
怎么检查网站的死链接呢?
查看>>
scrapy爬虫框架实例一,爬取自己博客
查看>>
React是UI的未来吗?
查看>>
中国人社部:2018年15个省(区、市)调整最低工资标准
查看>>
手把手教你通过Thrift 访问ApsaraDB for HBase
查看>>
MacOS安装MySQL 报错
查看>>
Java知识点总结(反射-反射操作泛型)
查看>>
Vue+webpack+Element 兼容问题总结
查看>>
《软技能》读书笔记(下)
查看>>
textarea文域高度自适应
查看>>
go语言renderer包代码分析
查看>>
【Scala谜题】成员声明的位置
查看>>