判断横屏竖屏(三种)


Posted in Javascript onFebruary 13, 2017

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 #Javascript
jQuery实现大图轮播
Feb 13 #Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 #Javascript
你真的了解BOM中的history对象吗
Feb 13 #Javascript
微信小程序-获得用户输入内容
Feb 13 #Javascript
js实现textarea限制输入字数
Feb 13 #Javascript
Canvas实现动态的雪花效果
Feb 13 #Javascript
You might like
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
PHP7变量处理机制修改
2021/03/09 PHP
JS 自动安装exe程序
2008/11/30 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
初识Javascript小结
2015/07/16 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python实现音乐下载器
2018/04/15 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
20行python代码实现人脸识别
2019/05/05 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
如何解决安装python3.6.1失败
2020/07/01 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
大学活动邀请函
2014/01/28 职场文书
企业节能减排实施方案
2014/03/19 职场文书
企业总经理任命书
2014/06/05 职场文书
企业文化标语口号
2014/06/09 职场文书
领导工作表现评语
2015/01/04 职场文书
结婚纪念日感言
2015/08/01 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python