不幸的是,每个浏览器都有自己的视口元标记实现。 不同的组合将在不同的浏览器上工作。

Android 2.2:似乎根本不支持视口元标记。

Android 2.3.x / 3.x:通过设置user-scalable = no,您也可以自己禁用视口meta标签的缩放。 这可能就是您的宽度选项无效的原因。 要允许浏览器缩放内容,您需要设置user-scaleable = 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定向错误

Chrome:缩放比例可以像在iOS中那样按预期方式工作,最小和最大均受尊重,您可以使用user-scalable = no关闭缩放。

结论:在检测到一些基本的浏览器/设备之后,您可以使用一些相当简单的JS来相应地设置内容。 我知道这种检测方法是不受欢迎的,但是在这种情况下,这几乎是不可避免的,因为每个供应商都已经去做自己的事! 希望这可以帮助人们与视口作斗争,如果有人有在不使用视口的情况下禁用Android 4.x缩放的解决方案,请告诉我。

[编辑]

Android 4.x Chrome浏览器(我认为大多数国家/地区已预装):您可以确保用户无法缩放并且页面为全屏。 缺点:您必须确保内容具有固定的宽度。 我尚未在较低的Android版本上对此进行过测试。 为此,请参见示例:

[编辑2]

iOS / Safari 7.1:自v7.1起,Apple为视口元标记引入了一个新标记,称为minimal-ui。为协助全屏应用程序,这隐藏了地址栏和底部工具栏,以提供全屏体验(不是完全全屏) API,但已关闭,不需要用户接受)。 它的确带有很多错误,并且在iPad中不起作用。

[编辑3]

iOS / Safari 8 Beta 4:在此版本中,Apple现在已删除了EDIT 2中提到的视口元标记minimal-ui。 来源-WebKit注释

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐