HTML5中判断横屏竖屏的方法(移动端)


Posted in HTML / CSS onAugust 04, 2016

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。

这里有两种方法:

一:CSS判断横屏竖屏

写在同一个CSS中

XML/HTML Code复制内容到剪贴板
  1. @media screen and (orientation: portrait) {   
  2.   /*竖屏 css*/   
  3. }    
  4. @media screen and (orientation: landscape) {   
  5.   /*横屏 css*/   
  6. }  

分开写在2个CSS中

竖屏

XML/HTML Code复制内容到剪贴板
  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   

横屏

XML/HTML Code复制内容到剪贴板
  1. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">   

二:JS判断横屏竖屏

XML/HTML Code复制内容到剪贴板
  1. //判断手机横竖屏状态:   
  2. window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {   
  3.         if (window.orientation === 180 || window.orientation === 0) {    
  4.             alert('竖屏状态!');   
  5.         }    
  6.         if (window.orientation === 90 || window.orientation === -90 ){    
  7.             alert('横屏状态!');   
  8.         }     
  9.     }, false);   

//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。

屏幕方向对应的window.orientation值:

ipad,iphone: 90 或 -90 横屏
ipad,iphone: 0 或180 竖屏
Andriod:0 或180 横屏
Andriod: 90 或 -90 竖屏

HTML / CSS 相关文章推荐
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
Html5元素及基本语法详解
Aug 02 #HTML / CSS
Html5 web本地存储实例详解
Jul 28 #HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 #HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 #HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 #HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 #HTML / CSS
HTML5 拖放功能实现代码
Jul 14 #HTML / CSS
You might like
终于听上了直流胆调频
2021/03/02 无线电
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python在非root权限下的安装方法
2018/01/23 Python
python安装requests库的实例代码
2019/06/25 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
在js中修改html body的样式
2021/11/11 Javascript