Android WebView 似乎忽略了网页上的“视口”信息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2909080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Android WebView seems to ignore "viewport" information on web pages
提问by Evan
I have a website that is using the viewport META tag to tell mobile browsers how to display content ( ). Viewing the page in the Android browser looks correct (and iPhone, etc).
我有一个网站，它使用视口 META 标签来告诉移动浏览器如何显示内容 ( )。在 Android 浏览器中查看页面看起来是正确的（和 iPhone 等）。
When I load the page into a WebView component in an android Application, the WebView ignores the "VIEWPORT" tag, and renders the page at "full" resolution, which is zoomed-in in this case.
当我将页面加载到 android 应用程序中的 WebView 组件中时，WebView 会忽略“VIEWPORT”标签，并以“完整”分辨率呈现页面，在这种情况下是放大的。
采纳答案by CommonsWare
Double-check your implementation against the "Building web pages to support different screen densities" section of the WebViewdocumentation: http://developer.android.com/reference/android/webkit/WebView.html
根据WebView文档的“构建网页以支持不同的屏幕密度”部分仔细检查您的实现：http: //developer.android.com/reference/android/webkit/WebView.html
回答by stickwithjosh
After lot's of experimentation I've determined that the Android WebView won't obey the 'viewport' setting if the actual page forces a width wider than the viewport setting.
经过大量实验，我确定如果实际页面强制宽度比视口设置更宽，Android WebView 将不会遵守“视口”设置。
For example, I was setting a viewport of 500px, but had an element on my page that forced a 960px width. The viewport wasn't obeyed because the WebView refused to hide that extra content.
例如，我将视口设置为 500 像素，但我的页面上有一个元素强制设置为 960 像素的宽度。由于 WebView 拒绝隐藏额外的内容，因此未遵守视口。
This seems obvious when I'm typing it, but I must have spent days working on the problem.
这在我打字时似乎很明显，但我必须花了几天时间来解决这个问题。
回答by jorisw
As the docs say in the link in the best answer, you can specify using a meta tag how the device should react to the size of your web app compared to the screen. The following tag made an Android phone respect the viewport size of my web app:
正如文档在最佳答案中的链接中所说，您可以使用元标记指定设备应如何对与屏幕相比的网络应用程序的大小做出反应。以下标签使 Android 手机尊重我的网络应用程序的视口大小：
<meta name="viewport" content="target-densitydpi=high-dpi" />
回答by onmyway133
Try using this method of WebSetting class
尝试使用 WebSetting 类的这种方法
setUseWideViewPort (boolean use)
I use this to tell Android webview to consider my "viewport" tag
我用它来告诉 Android webview 考虑我的“视口”标签
回答by Voss
Another fail in the implementation on some Android Phones ist the fact, that for example the HTC Desire HD will ignore the viewport TAG - user-scale=no completly.
在某些 Android 手机上实现的另一个失败是事实，例如 HTC Desire HD 将完全忽略视口标签 - user-scale=no。
回答by Lym Zoy
回答by Adam Johns
The only thing that worked for me was
唯一对我有用的是
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />
but specifically adding maximum-scale=1.0, minimum-scale=1.0to the already existing tag helped. For my specific case I didn't want to give the user the ability to zoom in/out so YMMV.
但特别是添加maximum-scale=1.0, minimum-scale=1.0到已经存在的标签有帮助。对于我的具体情况，我不想让用户能够放大/缩小 YMMV。
回答by Jonas ?ppelgran
I can only confirm your issue. There is an open issueat the android issue tracker. Please give it a vote/star if you're affected by this.
我只能确认你的问题。android 问题跟踪器中有一个未解决的问题。如果您受到此影响，请给它一个投票/星级。
回答by skidadon
Use this:
用这个：
<meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=low-dpi" />
Now Android WebView and the Browser adheres to the viewport settings.
现在 Android WebView 和浏览器遵循视口设置。
Phew, this took a lot of tweaking to get right. Jeez.
呼，这需要很多调整才能正确。天啊。
