源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-01-27 08:46 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:三种检测iPhone/iPad设备方向的方法
使用meta tag "viewport" viewport标签包含如下属性: [img]http://files.jb51.net/file_images/article/201404/201404231537571.gif?2014323153827[/img]   为了能自动探测并适配到屏幕宽度,应该使用device-with而不是设定一个固定值,另外为了避免用户缩放导致界面超出屏幕,需要设置maximum-scale,
[u]复制代码[/u] 代码如下:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
使用javascript脚本 下面的脚本通过检测屏幕宽度来检测方向并调整方向:
[u]复制代码[/u] 代码如下:
<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:
[u]复制代码[/u] 代码如下:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部