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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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+mysql写的留言本
2006/10/09 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php实现映射操作实例详解
2019/10/02 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
jQuery的学习步骤
2011/02/23 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
python实现简易学生信息管理系统
2020/04/05 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
新年抽奖获奖感言
2014/03/02 职场文书
八一建军节慰问信
2015/02/14 职场文书
小学体育组工作总结
2015/08/13 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server