三种检测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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
简单的js分页脚本
May 21 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
Vue实现星级评价效果实例详解
Dec 30 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程序的方法
2009/03/09 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
解决python对齐错误的方法
2020/07/16 Python
使用Python封装excel操作指南
2021/01/29 Python
python如何修改文件时间属性
2021/02/05 Python
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
客户服务经理岗位职责
2014/01/29 职场文书
合伙经营协议书范本
2014/09/13 职场文书
小学新教师个人总结
2015/02/05 职场文书
佛光寺导游词
2015/02/10 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
个人工作决心书
2015/09/22 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
原生JS实现飞机大战小游戏
2021/06/09 Javascript
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技