三种检测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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
JQuery 文本框使用小结
May 22 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP+javascript液晶时钟
2006/10/09 PHP
php 进度条实现代码
2009/03/10 PHP
php 高性能书写
2010/12/11 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
ES6 十大特性简介
2020/12/09 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python获取栅格点和面值的实现
2020/03/10 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
Overload和Override的区别
2012/09/02 面试题
Lucene推荐的分页方式是什么?
2015/12/07 面试题
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
毕业生自我鉴定
2013/11/05 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
入党培养人考察意见
2015/06/08 职场文书