Android视口设置“user-scalable=no"打破视口的宽度/缩放级别 [英] Android viewport setting "user-scalable=no" breaks width / zoom level of viewport

问题描述

我正在开发一个宽度为 640 像素的网络应用.

I am working on a web app which has a width of 640px.

在文档head中我设置了

  <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.

当我更改视口设置以省略 user-scalable 标签时:

When I change the viewport setting to leave out the user-scalable tag like this:

<meta name="viewport" content="width=640" />

Android 浏览器可以很好地调整到 640 像素 - 所以它可以工作.
然而现在的问题是，用户可以在 Android 和 iOS 上放大和缩小，因为 user-scalable 标签没有设置.

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.

如何在 Android 上禁止缩放同时将视口宽度设置为 640px?

推荐答案

尝试像这样渲染视口元标记:

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" />

我还注意到一些内容，例如 p 标签没有流过屏幕，所以解决这个问题的方法是将带有空字符串的 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视口设置“user-scalable=no"打破视口的宽度/缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！