适用于 iPhone 和 iPhone4 分辨率的不可缩放 web 视图答案

【问题标题】：Non-zoomable webview that works at both iPhone and iPhone4 resolutions适用于 iPhone 和 iPhone4 分辨率的不可缩放 web 视图
【发布时间】：2010-06-22 18:55:04
【问题描述】：

我想要一个包含单个 HTML 和单个 CSS 文件的 web 视图，以相同的大小显示图形，但每个都具有原生分辨率。

我现有的为 320x480 设计的 webviews 似乎可以很好地放大（例如清晰的文本和边框半径），尽管图像在 iPhone4 模拟器中是一半分辨率。如何模拟使用 HTML、CSS 或 JS 自动选择图形或其双分辨率版本的原生图像加载行为？（希望不是 JS）

我目前正在使用这样的视口声明：

<meta content='initial-scale=0.5; maximum-scale=1.0; minimum-scale=0.5; user-scalable=0;' name='viewport' />

这会缩小图像像素与显示像素的比例为 1:1，但它也会按比例缩小一切。当然，在较小的 iPhone 显示屏上让它变得很小。

我感觉这与某种视口大小的媒体查询有关？

【问题讨论】：

现有技术：stackoverflow.com/questions/1790346/… — 使用背景图片会更让人头疼，但试试webkit-background-size，猜猜它会起作用。
您在设备上获得相同的行为吗？ Sim 有几个已知的错误。

标签： iphone css uiwebview

【解决方案1】：

这将为 iPhone 4 加载一个特定的样式表：

<link
    rel="stylesheet" type="text/css" href="/css/style.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

【讨论】：

【解决方案2】：

前几天我偶然发现了这个：http://aralbalkan.com/3331

这将加载一个 iPhone 4 样式表

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

然后在您的低分辨率样式表中，神奇的举动是将您的背景大小属性设置为低分辨率图像的大小。

.demoImage
{
    background-image: url(../images/my-image-64.png);
    background-size: 64px 64px;
    background-repeat: no-repeat;
}

现在在retina.css 中只显示双分辨率版本

.demoImage
{
    background-image: url(../images/my-image-128.png);
}

现在 css 背景图像将显示 128x128 图像，就好像它是 64 个 css 像素，提供 1:1 图像像素以在 iPhone 4 上显示像素图像显示。

【讨论】：

【解决方案3】：

我也有同样的问题。我没有时间研究它，但我的想法是创建每英寸像素更高的图形，并将它们用于 iphone 3g(s) 和 iphone 4。

不确定这是否会起作用。但值得一试。

【讨论】：

问题在于带宽。您正在浪费带宽发送比在非 iPhone4 上需要的更大的图像。虽然它应该很好地缩小它们。

【解决方案4】：

CSS media query 应该可以工作：

@media only screen and (min-resolution: 300dpi) { ... }

此外，A List Apart 还为serving high-res images 提供了一种可供考虑的技术。这篇文章主要是关于打印样式的，但在这里也同样适用。

【讨论】：