三种检测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 相关文章推荐
js工具方法弹出蒙版
May 08 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
JavaScript 基本概念
Jan 20 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python爬取淘宝商品销量信息
2018/11/16 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
小学生读书感言
2014/02/12 职场文书
运动会入场词60字
2014/02/15 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
2014年老干部工作总结
2014/11/21 职场文书
打架检讨书
2015/01/27 职场文书
简历自我评价范文
2019/04/24 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang