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

番茄西红柿发布于2019-04-23 13:31 / 1457人阅读

摘要：禁用用户自动缩放功能判断横竖屏状态有两种方法判断判断一判断横屏还是竖屏写在同一个文件中竖屏横屏根据横竖屏设置大小时，正常页面尺寸常规书写即可，横屏样式多带带设置。没有切换状态时会不执行任何条件判断，此处不如判断横竖屏全面。

禁用用户自动缩放功能：

判断横竖屏状态有两种方法：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中，根据横竖屏引用不同样式文件：

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

横屏：

"stylesheet" media="all and (orientation:landscape)" href="landscape.css">

竖屏：

"stylesheet" media="all and (orientation:portrait)" href="portrait.css">

备注：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判断是否全屏状态横竖屏横竖屏切换 H5横竖屏检测

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1993.html

更靠谱的横竖屏检测方法

摘要：毫无疑问，需要使用来监听横竖屏的变化。其他需要监听横竖屏的地方只需订阅一下即可。实现思路创建包含标识横竖屏状态的特定样式通过向页面中注入代码回调函数中获取横竖屏的状态这里我选择的节点作为检测样式属性。前不久，做了一个H5项目，需要在横竖屏变化时，做一些处理。毫无疑问，需要使用orientationchange来监听横竖屏的变化。方案一： // 监听 orientation chan...

FingerLiu 2019-08-05 10:08 评论0 收藏0
更靠谱的横竖屏检测方法

摘要：毫无疑问，需要使用来监听横竖屏的变化。其他需要监听横竖屏的地方只需订阅一下即可。实现思路创建包含标识横竖屏状态的特定样式通过向页面中注入代码回调函数中获取横竖屏的状态这里我选择的节点作为检测样式属性。前不久，做了一个H5项目，需要在横竖屏变化时，做一些处理。毫无疑问，需要使用orientationchange来监听横竖屏的变化。方案一： // 监听 orientation chan...

Richard_Gao 2019-08-22 10:38 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

sPeng 2019-08-21 14:17 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

hss01248 2019-08-05 10:02 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

bang590 2019-08-01 15:37 评论0 收藏0