三种检测iPhone/iPad设备方向的方法


Posted in Javascript onApril 23, 2014

使用meta tag "viewport"

viewport标签包含如下属性:

三种检测iPhone/iPad设备方向的方法 

为了能自动探测并适配到屏幕宽度,应该使用device-with而不是设定一个固定值,另外为了避免用户缩放导致界面超出屏幕,需要设置maximum-scale,

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

使用javascript脚本

下面的脚本通过检测屏幕宽度来检测方向并调整方向:

<script type="text/javascript"> 
var updateLayout = function() { 
if (window.innerWidth != currentWidth) { 
currentWidth = window.innerWidth; 
var orient = (currentWidth == 320) ? "profile" : "landscape"; 
document.body.setAttribute("orient", orient); 
window.scrollTo(0, 1); 
} 
}; iPhone.DomLoad(updateLayout); 
setInterval(updateLayout, 400); 
</script>

上述脚本可放在head部分

使用CSS

使用CSS的media query:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
jQuery拖动图片删除示例
May 10 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
Javascript实现简易天数计算器
May 18 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 #Javascript
javascript数字时钟示例分享
Apr 23 #Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 #Javascript
iframe实用操作锦集
Apr 22 #Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 #Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 #Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 #Javascript
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
js转html实体的方法
2016/09/27 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python获取图片颜色信息的方法
2015/03/18 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python KMeans聚类问题分析
2018/02/23 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
深入学习python多线程与GIL
2019/08/26 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
小学生检讨书大全
2014/02/06 职场文书
百日安全生产活动总结
2014/07/05 职场文书
教师职位说明书
2014/07/29 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python