使用JS判断移动端手机横竖屏状态


Posted in Javascript onJuly 30, 2018

禁用用户自动缩放功能:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

判断横竖屏状态有两种方法:css判断、js判断

(一)、css判断横屏还是竖屏

1、写在同一个css文件中

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

根据横竖屏设置大小时,正常页面尺寸常规书写即可,横屏样式单独设置。即只需在原有样式基础上添加横屏样式即可,

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

当用户横屏时加载横屏样式,竖屏时取消横屏样式即加载默认样式。

2、分开写在两个css中,根据横竖屏引用不同样式文件:

    根据横竖屏引用不同样式文件

横屏:

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

竖屏:

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

备注:css判断横竖屏是时时的可无缝衔接,即横屏加载横屏样式,竖屏加载竖屏样式,

(二)js判断横屏还是竖屏

//判断手机横竖屏状态:
  window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) { 
      console.log("竖屏");
      $(".codeIg_s").removeClass('vercreen');//取消横屏样式
    } 
    if (window.orientation === 90 || window.orientation === -90 ){ 
      console.log("横屏");
      $(".codeIg_s").addClass('vercreen');//添加横屏样式
    } 
  }, false);

备注:横屏样式在vercreen类名下修改原默认样式,可正常使用,缺点是必须有横竖屏的切换状态才会触发。

如果用户默认是横屏状态时不会触发横屏条件判断,只有用户从横屏转为竖屏或者从竖屏转为横屏时才会触发相应条件判断。

没有切换状态时会不执行任何条件判断,此处不如css判断横竖屏全面。

总结

以上所述是小编给大家介绍的使用JS判断移动端手机横竖屏状态,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 #Javascript
详解JSON Web Token 入门教程
Jul 30 #Javascript
JS中Promise函数then的奥秘探究
Jul 30 #Javascript
浅析java线程中断的办法
Jul 29 #Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 #Javascript
如何在js代码中消灭for循环实例详解
Jul 29 #Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
Bootstrap精简教程
2015/11/27 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
会议主持词结束语
2015/07/03 职场文书
外出培训学习心得体会
2016/01/18 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android