使用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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
Javascript实现的分页函数
Feb 07 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
js实现页面图片消除效果
Mar 24 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python中format()函数的简单使用教程
2018/03/14 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python autoescape标签用法解析
2020/01/17 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
公司门卫岗位职责
2014/03/15 职场文书
《称象》教学反思
2014/04/25 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
python爬虫--selenium模块
2021/03/31 Python