判断横屏竖屏(三种)


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 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
详解JS面向对象编程
Jan 24 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
简单了解three.js 着色器材质
Aug 03 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
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Python流程控制 if else实现解析
2019/09/02 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
企业管理毕业生求职信
2014/03/11 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
家长通知书家长意见
2014/12/30 职场文书
上课迟到检讨书
2015/05/06 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
python实现双链表
2022/05/25 Python