如何让 WVGA Android 浏览器停止缩放图像？

发布于 2024-08-31 19:57:47 字数 677 浏览 5 评论 0 原文

我正在设计一个用于在 Android 浏览器中显示的 HTML 页面。考虑这个简单的示例页面：

<html>
<head><title>Simple!</title>
</head>
<body>
<p><img src="http://sstatic.net/so/img/logo.png"></p>
</body>
</html>

它在标准 HVGA 手机 (320x480) 上看起来很好，但在 HDPI WVGA 尺寸（480x800 或 480x854）上，内置浏览器会自动放大图像；它看起来很难看。

我读过，我应该能够使用此标签来强制浏览器停止缩放我的页面：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

...但所做的只是禁用用户缩放（缩放按钮消失）；它实际上并没有阻止浏览器缩放我的图像。调整比例因子（将它们全部设置为 2.0 或 0.5）根本没有效果。

如何强制 WVGA 浏览器停止缩放图像？

原文

I'm designing an HTML page for display in Android browsers. Consider this simple example page:

<html>
<head><title>Simple!</title>
</head>
<body>
<p><img src="http://sstatic.net/so/img/logo.png"></p>
</body>
</html>

It looks just fine on the standard HVGA phones (320x480), but on HDPI WVGA sizes (480x800 or 480x854) the built-in browser automatically scales the image up; it looks ugly.

I've read that I should be able to use this tag to force the browser to stop scaling my page:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

... but all that does is disable user scaling (the zoom buttons disappear); it doesn't actually prevent the browser from scaling my image. Adjusting the scale factors (setting them all to 2.0 or 0.5) has no effect at all.

How can I force the WVGA browser to stop scaling my images?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

债姬 2024-09-07 19:57:47

啊，通过搜索Android源码找到了。有一个新的 Android 特定的“目标-密度Dpi”设置可在“viewport”元标记中使用；据我所知，除了签入评论之外，它完全没有记录！

添加对 WebView 的 dpi 支持。

在“视口”元标记中，您可以指定“目标密度Dpi”。
如果未指定，则从今天开始使用默认值 160dpi。
那么视口标签中指定的 1.0 比例因子表示 100%
G1 为 150%，Sholes 为 150%。如果将“目标密度Dpi”设置为
“device-dpi”，则 1.0 比例因子在 G1 和 Sholes 上均表示 100%。

实现了 Safari 的 window.devicePixelRatio 和 CSS 媒体查询
设备像素比。

因此，如果您使用“device-dpi”并修改字体大小和图像的CSS
src 取决于 window.devicePixelRatio，您可以获得更好的页面
鞋/激情。

这是“target-密度Dpi”的选项列表。

device-dpi：使用设备的本机 dpi 作为目标 dpi。
低dpi：120dpi
medium-dpi：160dpi，这也是今天的默认值
高dpi：240dpi
：我们将 70 到 400 之间的任何数字作为有效的目标 dpi。