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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了三种检测iPhone/iPad设备方向的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含929字，纯文字阅读大概需要2分钟。

内容图文

使用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">

内容总结

以上是互联网集市为您收集整理的三种检测iPhone/iPad设备方向的方法全部内容，希望文章能够帮你解决三种检测iPhone/iPad设备方向的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/362693.html

来源：【匿名】