判断横屏竖屏（三种）
更新时间：2017年02月13日 16:09:20 作者：mmm(⊙o⊙)
本文主要介绍了通过HTML，CSS，JS三种判断横屏竖屏的方法。具有很好的参考价值，下面跟着小编一起来看下吧
在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过HTML，CSS，JS三种判断方法记录下来，方便以后翻阅。
1、通过在html中分别引用横屏和竖屏的样式：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" > //引用竖屏的CSS <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" > //引用横屏的CSS
2、CSS中通过媒体查询的方法来判断：
@media (orientation: portrait ){
//竖屏CSS
}
@media ( orientation: landscape ){
//横屏CSS
}
3、js判断是否为横屏竖屏:
window.addEventListener("onorientationchange" in window ? orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
}
}, false);
只要用户改变了设备的查看模式，就会触发onorientationchange事件。
orientation有4个值：0,90，-90,180
值为0和180的时候为竖屏（180为倒过来的竖屏）；
90和-90时为横屏（-90为倒过来的竖屏模式）；
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
List Installed Hot Fixes...2007-06-06
这篇文章主要为大家介绍了uniapp自定义网络检测组件项目实战总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了javascript实现全角转半角的方法,涉及JavaScript字符串遍历与编码转换的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了微信小程序实现监听页面滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
学习强大的JavaScript一行代码，能够节省你的时间和代码量，所以本文为大家整理了25个JavaScript实用代码技巧，感兴趣的小伙伴可以了解一下2023-07-07
这篇文章主要介绍了微信小程序事件绑定基本语法示例详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了js拖拽一些常见的思路方法,需要的朋友可以参考下2014-03-03
一文详解JavaScript 如何将 HTML 转成 Markdown
这篇文章主要介绍了一文详解JavaScript如何将HTML转成Markdown，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
下面小编就为大家带来一篇捕获未处理的Promise错误方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
JavaScript中的定时器大家基本在平时的开发中都遇见过吧，但是又有多少人去深入的理解其中的原理呢？本文我们就来分析一下定时器的实现原理、定时器的妙用、定时器使用注意事项，有兴趣的朋友可以看下2016-12-12
最新评论