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 box-sizing属性
Apr 17 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python实现图片拼接的代码
2018/07/02 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
物业门卫岗位职责
2013/12/28 职场文书
爱护公共设施的标语
2014/06/24 职场文书
小学端午节活动总结
2015/02/11 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
工作证明书
2015/06/15 职场文书
七年级英语教学反思
2016/02/15 职场文书
2019广播稿怎么写
2019/04/17 职场文书