使用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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
vue data恢复初始化数据的实现方法
Oct 31 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中判断变量为空的几种方法小结
2013/11/12 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
PHP7 新增功能
2021/03/09 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
浅析python连接数据库的重要事项
2021/02/22 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
写好自荐信的技巧
2013/11/08 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
公司授权委托书
2014/10/17 职场文书
金秋助学感谢信
2015/01/21 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS