
使用元标记:
<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。
解决方法 不幸的是,每个浏览器都有自己的vIEwport元标记的实现。不同的组合可以在不同的浏览器上工作。AndroID 2.2:vIEwport元标记似乎并不支持。
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,除了最小和最大尺度不再被尊重,如果您使用用户可扩展=是用户可以随时放大,设置为“否”意味着您自己的比例被忽略,这是我现在面临的问题,吸引我这个问题…你似乎不能在4.x.同时禁用缩放和缩放。
iOS / Safari(4.x / 5.x测试):缩放工作按预期,您可以禁用缩放用户可扩展= 0(关键字是/否在4.x中不工作)。 iOS / Safari也没有target-densitydpi的概念,所以你应该离开它,以避免错误。您不需要最小和最大,因为您可以以预期的方式关闭缩放。只使用宽度或你会跑到iOS orientation bug
<Meta name="vIEwport" content="initial-scale=1.0,user-scalable=0" />
Chrome:缩放工作按预期工作,就像在iOS中一样,最小和最大值都可以,您可以通过使用user-scalable = no关闭缩放。
<Meta name="vIEwport" content="initial-scale=1.0,user-scalable=no" />
结论:在一些基本的浏览器/设备检测之后,您可以使用一些相当简单的Js来相应地设置内容。我知道这种类型的检测被皱眉,但在这种情况下,它几乎是不可避免的,因为每个供应商已经做了自己做的事情!希望这有助于人们打击视口,如果有人有一个解决方案禁用缩放AndroID 4.x没有使用视口,请让我知道。
[编辑]
AndroID 4.x Chrome浏览器(我认为是在大多数国家/地区预先安装):您可以确保用户无法缩放,并且该页面是全屏。缺点:你必须确保内容具有固定的宽度。我没有测试这个在较低的AndroID版本。为此,请参见示例:
<Meta name="vIEwport" content="wIDth=620,user-scalable=no" />
[EDIT 2]
iOS / Safari 7.1:从v7.1开始,Apple为vIEwport元标记引入了一个名为minimal-ui的新标志。为了协助全萤幕应用程式,这会隐藏地址栏和底部工具栏的全屏体验(不完全是全屏API,但关闭,不需要用户接受)。它自带的是它的fair share of bugs as well,不工作在iPads。
<Meta name="vIEwport" content="initial-scale=1.0,user-scalable=0,minimal-ui" />
[EDIT 3]
iOS / Safari 8 Beta 4:在EDIT 2中提到的视口元标记minimal-ui现在已被此版本中的Apple删除。 Source – WebKit Notes
总结以上是内存溢出为你收集整理的android – 完整的网页和禁用缩放视口元标记所有移动浏览器全部内容,希望文章能够帮你解决android – 完整的网页和禁用缩放视口元标记所有移动浏览器所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)