我希望我的网页显示为全屏，并禁止在所有移动设备上缩放。使用meta标签：<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上运行。
3 回答
牛魔王的故事
TA贡献1830条经验 获得超3个赞
不幸的是，每个浏览器都有自己的视口元标记实现。不同的组合将在不同的浏览器上工作。
Android 2.2：似乎根本不支持视口元标记。
Android 2.3.x / 3.x：通过设置user-scalable = no，您也可以自己禁用视口meta标签的缩放。这可能就是您的宽度选项无效的原因。要允许浏览器缩放内容，您需要设置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）：缩放按预期工作，您可以使用user-scalable = 0禁用缩放（关键字yes / no在4.x中不起作用）。iOS / Safari也没有target-densitydpi的概念，因此您应该避免使用它来避免错误。您不需要最小值和最大值，因为您可以按预期的方式关闭缩放。仅使用宽度，否则会遇到iOS定向错误
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome：缩放比例像在iOS中一样按预期工作，最小和最大均受尊重，您可以使用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-ui在此版本中，Apple现在已删除了EDIT 2中提到的视口元标记。来源-WebKit注释
守着星空守着你
TA贡献1799条经验 获得超8个赞
的HTML
<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);
}
如果发现不一致，则第二种方法更不得已。
- 3 回答
- 0 关注
- 540 浏览
添加回答
举报
0/150
提交
取消