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 相关文章推荐
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 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 存储文本换行实现方法
2010/01/05 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP静态成员变量
2017/02/14 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
sort命令的作用和用法
2012/11/04 面试题
小学防溺水制度
2014/01/29 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
聘任证明怎么写
2015/03/02 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
2015年圣诞节寄语
2015/08/17 职场文书