判断横屏竖屏(三种)


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 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
ES6基础之默认参数值
Feb 21 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
原生JS实现飞机大战小游戏
Jun 09 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
理解Javascript闭包
2013/11/01 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python怎么对数字进行过滤
2020/07/05 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
Java基础面试题
2012/11/02 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
农村婚礼主持词
2014/03/13 职场文书
三年级评语大全
2014/04/23 职场文书
促销活动总结范文
2014/04/30 职场文书
员工合理化建议书
2014/05/19 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
通知的写法
2015/04/23 职场文书
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript