Coe*_*sen 43 iphone meta android viewport ipad
我希望我的网页全屏显示并禁用所有移动设备上的缩放.
使用元标记:
<meta name="viewport" content="width=1165, user-scalable=no">
我能够为iPhone/iPad做到这一点,但在Android设备上,网站的放大率约为125%.
如果我使用标签
<meta name="viewport" content="width=max-device-width, user-scalable=no">
我得到相反的结果.那么它适用于Android,但它不适用于iPad/iPhone.
Bru*_*Dev 83
不幸的是,每个浏览器都有自己的视口元标记实现.不同的组合将适用于不同的浏览器.
Android 2.2:视口元标记似乎根本不受支持.
Android 2.3.x/3.x:通过设置user-scalable = no,您也可以自行禁用视口元标记的缩放.这可能是您的宽度选项无效的原因.要允许浏览器扩展内容,您需要设置user-scalable = yes,然后禁用缩放,您可以将最小和最大比例设置为相同的值,以便它不会缩小或增长.玩具初始比例,直到您的网站紧贴.
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Android 4.x:同样的规则适用于2.3.x,但最小和最大比例不再受到尊重,如果你使用user-scalable = yes,用户可以随时缩放,将其设置为'no'意味着忽略你自己的比例,这是我现在面临的问题让我想到了这个问题......你似乎无法在4.x中同时禁用缩放和缩放.
iOS/Safari(4.x/5.x测试):Scales按预期工作,您可以使用user-scalable = 0禁用缩放(关键字yes/no在4.x中不起作用).iOS/Safari也没有target-densitydpi的概念,因此您应该将其保留以避免错误.您不需要min和max,因为您可以按预期方式关闭缩放.仅使用宽度,否则您将遇到iOS方向错误
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome:Scales按预期工作,就像在iOS,min和max中一样,您可以使用user-scalable = no来关闭缩放.
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
结论:在一些基本的浏览器/设备检测之后,您可以使用一些相当简单的JS来相应地设置内容.我知道这种类型的检测是不受欢迎的,但在这种情况下它几乎是不可避免的,因为每个供应商已经完成了他们自己的事情!希望这可以帮助人们对抗视口,如果有人有解决方案禁用Android 4.x缩放而不使用视口,请告诉我.
[编辑]
Android 4.x Chrome浏览器(我认为在大多数国家/地区已预先安装):您可以确保用户无法缩放,并且页面是全屏的.缺点:您必须确保内容具有固定宽度.我没有在较低的Android版本上测试过这个.为此,请参阅示例:
<meta name="viewport" content="width=620, user-scalable=no" />
[编辑2]
iOS/Safari 7.1:从v7.1开始,Apple为视口元标记引入了一个新标志minimal-ui.为了帮助全屏应用程序,这会隐藏地址栏和底部工具栏以获得全屏体验(不是全屏幕API,但是关闭并且不需要用户接受).它确实附带了它的公平份额的错误,并不适用于iPad.
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />
[编辑3]
iOS/Safari 8 Beta 4:minimal-uiApple在此版本中已删除了EDIT 2中提到的视口元标记.来源 - WebKit笔记
超文本标记语言
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>
jQuery
选项1：
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
选项2：
var deviceSpecific = {
iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
$('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}
如果您发现不一致，选项二是最后的选择。
| 归档时间： |
|
| 查看次数： |
95638 次 |
| 最近记录： |