判断横屏竖屏(三种)


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常见注意事项
Jan 01 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
详解React之key的使用和实践
Sep 29 Javascript
npm 语义版本控制详解
Sep 10 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
详解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
WINXP下apache+php4+mysql
2006/11/25 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP中的self关键字详解
2019/06/23 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
[05:24]TI9采访——教练
2019/08/24 DOTA
通过shell+python实现企业微信预警
2019/03/07 Python
python实现随机漫步方法和原理
2019/06/10 Python
python实现双人五子棋(终端版)
2020/12/30 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
用友笔试题目
2016/10/25 面试题
工商管理系学生的自我评价分享
2013/11/29 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
爱国口号
2014/06/19 职场文书
标准单位租车协议书
2014/09/23 职场文书
单位委托书格式范本
2014/09/29 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
运输公司工作总结
2015/08/11 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
python中mongodb包操作数据库
2022/04/19 Python