使用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 Panel常用方法
Oct 07 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 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/10/25 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
浅谈js的异步执行
2016/10/18 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
struct与class的区别
2014/02/03 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
经销商会议欢迎词
2014/01/11 职场文书
新三好学生主要事迹
2014/01/23 职场文书
网络技术专业求职信
2014/02/18 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
2014离婚协议书范文
2014/09/10 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
团组织推荐意见
2015/06/05 职场文书
复活读书笔记
2015/06/29 职场文书
消防演习感想
2015/08/10 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA