Android WebView 似乎忽略了网页上的“视口”信息

Posted 2023-05-07

【中文标题】Android WebView 似乎忽略了网页上的“视口”信息

【英文标题】：Android WebView seems to ignore "viewport" information on web pages

【发布时间】：2011-02-23 22:38:36

【问题描述】：

我有一个网站，它使用视口 META 标记告诉移动浏览器如何显示内容 ( )。在 android 浏览器中查看页面看起来是正确的（和 iPhone 等）。

当我将页面加载到 android 应用程序中的 WebView 组件中时，WebView 会忽略“VIEWPORT”标签，并以“全”分辨率呈现页面，在这种情况下是放大的。

【参考方案1】：

经过大量实验后，我确定如果实际页面强制宽度大于视口设置，Android WebView 将不会遵守“视口”设置。

例如，我将视口设置为 500 像素，但我的页面上有一个元素强制设置为 960 像素的宽度。没有遵守视口，因为 WebView 拒绝隐藏那些额外的内容。

当我输入它时，这似乎很明显，但我必须花费数天时间来解决这个问题。

【讨论】：

这很有趣。视口元指令肯定应该在计算初始页面渲染之前生效吗？

【参考方案2】：

正如文档在最佳答案的链接中所说，您可以使用元标记指定设备应如何响应您的网络应用程序相对于屏幕的大小。以下标记使 Android 手机尊重我的网络应用的视口大小：

<meta name="viewport" content="target-densitydpi=high-dpi" />

【讨论】：

解决我的问题，Android 没有缩小到“设备宽度”。谢谢:)

根据我的最佳答案，因为我们中的一些明星程序员必须适合提供给我们的页面，由非专业人士编码。 :P

【参考方案3】：

尝试使用WebSetting类的这个方法

setUseWideViewPort (boolean use)

我用它来告诉 Android webview 考虑我的“viewport”标签

【讨论】：

+1 这很重要 - 来自文档 “获取 WebView 是否支持“视口”html 元标记或将使用宽视口。”

它对我有用。但是我发现即使它设置为 false，视口标签仍然会被处理，因为当我将其更改为 value="width=100%" 时，HTML 也会正确显示。

【参考方案4】：

接受答案中的Link 和this 将有助于理解Android 上的视口。

在我的场景中，使用的是固定宽度，解决方法是：

settings.setUseWideViewPort(true)
settings.setLoadWithOverviewMode(true)

【参考方案5】：

在某些 Android 手机上实施的另一个失败是事实，例如 HTC Desire HD 将完全忽略视口标签 - user-scale=no。

【讨论】：

我的 HTC Incredible S 得到了相同的结果。尝试了书中的每一个技巧，它不会让步：视口标签被完全忽略。

据我所知，它叫user-scalable 而不是user-scale。

【参考方案6】：

使用这个：

 <meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=low-dpi" />

现在 Android WebView 和浏览器遵循视口设置。

唷，这需要大量调整才能正确。天哪。

【参考方案7】：

我只能确认您的问题。 android 问题跟踪器上有一个open issue。如果您受到此影响，请给它投票/star。

【参考方案8】：

唯一对我有用的是

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />

但特别将maximum-scale=1.0, minimum-scale=1.0 添加到已经存在的标签会有所帮助。对于我的具体情况，我不想让用户能够放大/缩小 YMMV。