判断横屏竖屏（三种）

更新时间：2017年2月19日 10:00 点击：2290

在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过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为倒过来的竖屏模式）；

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

[!--infotagslink--]

上一篇: Bootstrap选项卡学习笔记分享

下一篇: 基于jQuery代码实现圆形菜单展开收缩效果

JavaScript判断浏览器及其版本信息
本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
一个奇葩的最短的 IE 版本判断JS脚本
使用 conditional comment 来判断 IE 的版本。嗯，是早早有人提出，但没有认真看代码。昨天刚好在看 CSS3 PIE 的时候看到，觉得是不是不靠谱。今天看到 Paul Irish 也提起，那么，推荐一下吧。这是作者博客上写的：复制代码代码...2014-05-31
c# 判断是否为空然后赋值的4种实现方法
下面小编就为大家分享一篇c# 判断是否为空然后赋值的4种实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
MySql存储过程之逻辑判断和条件控制
具体详情请看下文小编给大家带来的知识点。同编写程序类似，存储过程中也有对应的条件判断，功能类似于if、switch。在MySql里面对应的是IF和CASE1、IF判断IF判断的格式是这样的：IF expression THEN commands [ELSEIF ex...2015-10-21
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
废话不多说了，直接给大家贴代码了。<?php class test{} $a1 = null; $a2 = ""; //$a3 = $a4 = 0; $a5 = '0'; $a6 = false; $a7 = array(); //var $a8; $a9 = new test(); for ($i=1; $i <=9 ; $i++) {...2015-11-24
java正则表达式判断前端参数修改表中另一个字段的值
这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07
C#判断一个字符串是否是数字或者含有某个数字的方法
这篇文章主要介绍了C#判断一个字符串是否是数字或者含有某个数字的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25
C#获得程序的根目录以及判断文件是否存在的实例讲解
今天小编大家分享一篇C#获得程序的根目录以及判断文件是否存在的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
从PHP $_SERVER相关参数判断是否支持Rewrite模块
如果是http://www.jb51.net/p1141.html形式的URL，可通过$_SERVER['REQUEST_URI']和$_SERVER['QUERY_STRING']值的区别来分析，最主要是如果页面是通过重定向会产生$_SERVER['REDIRECT_QUERY_STRING']和$_SERVER['REDIREC...2013-10-04
JavaScript判断DIV内容是否为空的方法
整体思路是这样的：判断div内部是否为空，如果为空，给出无数据提示；否则显示正常页面，下面给大家分享js判断div内容是否为空的方法，对判断div内容是否为空的相关知识感兴趣的朋友一起学习吧...2016-02-01
toString.call()通用的判断数据类型方法示例
这篇文章主要给大家介绍了关于toString.call()通用的判断数据类型方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-08-29
js判断手机访问或者PC的几个例子(常用于手机跳转)
js判断手机或者PC的例子我们在几乎所有网站都会有这段代码了，现在手机流量与pc差不多了，下面来看两段js判断手机或者PC例子吧...2015-12-17
js 检测判断fckeditor是否为空
js 检测判断fckeditor是否为空  <!DOCTYPE html PUBLIC "-//W3C//DTD...2016-09-20
Lua判断变量是否为数字、字符串是否可以转换为数字等
这篇文章主要介绍了Lua判断变量是否为数字、字符串是否可以转换为数字等,本文讲解了Lua 判断是字符还是数字的方法、Lua判断数字的方法、判断可否转换为数字的方法、判断并且准备一个初值的方法,需要的朋友可以参考下...2020-06-30
JavaScript判断按钮被点击的方法
javascript代码判断按钮是否被点击了在项目中经常会遇到这个需求，今天小编抽点时间给大家分享一段代码关于javascript判断按钮是否被点击的方法，感兴趣的朋友一起学习吧...2015-12-14
C#判断某程序是否运行的方法
这篇文章主要介绍了C#判断某程序是否运行的方法,代码结构简单功能实用,需要的朋友可以参考下...2020-06-25
C#中文件名或文件路径非法字符判断方法
这篇文章主要介绍了C#中文件名或文件路径非法字符判断方法,本文主要使用了内置的GetInvalidFileNameChars方法实现非法字符判断,需要的朋友可以参考下...2020-06-25
c++ 判断奇数偶数实例介绍
下面通过判断一个数是偶数还是奇数来展示交互递归的应用，并且此题突出了递归跳跃的信任的重要性,需要的朋友可以参考下...2020-04-25
thinkphp自定义权限管理之名称判断方法
下面小编就为大家带来一篇thinkphp自定义权限管理之名称判断方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-04-03
JS如何判断对象是否包含某个属性
这篇文章主要介绍了JS如何判断对象是否包含某个属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-30

判断横屏竖屏（三种）

相关文章

阁下可能感兴趣的内容

推荐阅读