三种检测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 Object与Function使用
Jan 11 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
原生js实现弹幕效果
Nov 29 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生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
两款万能的php分页类
2015/11/12 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
js获取变量
2006/08/24 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Python简单实现区域生长方式
2020/01/16 Python
django中related_name的用法说明
2020/05/20 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
一份软件工程师的面试试题
2016/02/01 面试题
班组长工作职责
2013/12/25 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
新年晚会主持词
2014/03/24 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
青年文明号口号
2014/06/17 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
西安导游词
2015/02/12 职场文书