Android的视口设置＆QUOT;用户可升级=否]休息宽度视区/缩放级别 [英] Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
问题描述
我工作的一个Web应用程序，其具有640px的宽度。
I am working on a web app which has a width of 640px.
在文档头我设置
<meta name="viewport" content = "width=640, user-scalable=no" />
所以内容是很好的显示和水平拉伸。
这工作完全在iOS，但Android中的浏览器中打开放大，因此用户双击缩小和整个页面。该网站
so the content is nicely displayed and stretched horizontally.
This works perfectly on iOS but in Android the browser opens the website zoomed in so the user has to double click to zoom out and the entire page.
当我改变视口设置，离开了用户可升级标签是这样的：
When I change the viewport setting to leave out the user-scalable tag like this:
<meta name="viewport" content="width=640" />
Android浏览器很好地调整到640px - 所以作品 - 。
但问题现在是，用户可以放大和缩小在Android和iOS，因为用户可升级标签没有被设置。
the Android browser adjusts nicely to the 640px - so it works.
The problem however now is, that users can zoom in and out on Android and iOS since the user-scalable tag is not set.
如何禁止缩放和设置视口宽度为640px Android上同一时间？
推荐答案
试图渲染视元，像这样的标签：
Trying rendering the viewport meta tag like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
设置比例设置将设置他们能走多远放大用户的限制，因此，如果您设置的初始和最大的相同数额，这应该解决问题。
Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.
更新：我能够通过设置下面来解决我的Android设备的错误都在一起：
UPDATE: I was able to fix my bug for android devices all together by setting the below:
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
我也注意到一些内容，例如对标签不流淌在屏幕上，所以黑客攻击，这将是与空字符串background-image属性添加到被卡住而不会跨越任何内容布局视图。希望这有助于这个时候你。
I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.
这篇关于Android的视口设置＆QUOT;用户可升级=否]休息宽度视区/缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
