博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
判断页面是横屏还是竖屏
阅读量:5256 次
发布时间:2019-06-14

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

在h5页面中必须要在html头部加上这个

 理解:

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

可以分成两个方法实现区分手机竖屏和横屏的效果:

js判断

//判断手机横竖屏状态: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这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。

 css判断

这是在一个文件中

@media screen and (orientation: portrait) {  /*竖屏 css*/} @media screen and (orientation: landscape) {  /*横屏 css*/}

 因为可能竖屏和横屏的样式是不一样的 所以需要分成两个文件

竖屏
横屏

 

转载于:https://www.cnblogs.com/GainLoss/p/6530320.html

你可能感兴趣的文章
Oracle-05
查看>>
linux grep 搜索查找
查看>>
Not enough free disk space on disk '/boot'(转载)
查看>>
android 签名
查看>>
vue项目中使用百度统计
查看>>
android:scaleType属性
查看>>
SuperEPC
查看>>
mysql-5.7 innodb 的并行任务调度详解
查看>>
shell脚本
查看>>
Upload Image to .NET Core 2.1 API
查看>>
Js时间处理
查看>>
Java项目xml相关配置
查看>>
三维变换概述
查看>>
第三次作业
查看>>
vue route 跳转
查看>>
【雷电】源代码分析(二)-- 进入游戏攻击
查看>>
Entityframework:“System.Data.Entity.Internal.AppConfig”的类型初始值设定项引发异常。...
查看>>
Linux中防火墙centos
查看>>
mysql新建用户,用户授权,删除用户,修改密码
查看>>
FancyCoverFlow
查看>>