视网膜移动网络应用程序答案

【问题标题】：Retina mobile web app视网膜移动网络应用程序
【发布时间】：2013-04-30 10:21:15
【问题描述】：

免责声明：我知道这些类型的问题已经被问到死了，但我找不到任何对我的具体案例有帮助的问题。

我正在开发一个无法使用响应式样式的移动网络应用程序（=以百分比或 ems 等形式定义大小）；一切都需要像素完美。到目前为止，我已经完成了一个 640 像素 宽（Retina）的布局。目标平台是小型 iOS 设备（iPhone、iPod touch）、Android 手机和 Windows Phone。任何其他平台都是肉汁，但不是“官方”支持的。

当我通过开发人员工具伪造用户代理时，它在桌面 Chrome 上看起来很棒。但是，当我在实际的移动设备上测试它时，缩放在不同平台上的工作方式不同。 Android 似乎会诱导水平滚动，而关于 Windows Phone 的说法越少越好。我目前没有 iPhone 来测试它。

我想要的是缩放 640 像素宽的布局以适应设备的宽度。用户不应该能够横向滚动，也不应该能够通过捏合来缩放。就所有意图和目的而言，它应该看起来像一个原生应用程序。

我根据在 SO 和其他网站上找到的答案尝试了不同的突变，但我目前使用的视口元标记看起来像这样；

<meta content='width=640, target-densityDpi=device-dpi, initial-scale=0.5, maximum-scale=0.5, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=640, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

据我所知，Android 的规模数字存在某种问题。

我怎样才能实现我想要的？我已经在做用户代理嗅探了（我知道这很脏），所以我可以使用特定于移动操作系统的元标记。

大多数应用程序还没有完成，所以我也可以做移动操作系统特定的 CSS，我对此持开放态度；但是，为每个操作系统/分辨率维护单独的样式表似乎非常不切实际。

【问题讨论】：

标签： css mobile mobile-website viewport meta

【解决方案1】：

这不起作用的原因是因为initial-scale=0.5 并不意味着640 的文档宽度将倾斜到320；相反，这表示用户在加载页面时看到的初始缩放级别。

我建议将您的 DOM 宽度更改为 320 像素，并将您的 initial-scale 属性设置为 1。如果您希望您的整个布局成为“视网膜”，那么您需要单独处理每个元素。例如。如果有一个 300x200 的图像现在在视网膜上看起来很模糊，您可以通过 CSS 处理：

@media  only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/1),
    only screen and (min-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 1.5dppx) {

    img { background-image: url('image@2x.png'); background-size: cover; }
}

在此示例中，image@2x.png 的大小为 600x400。

希望这会有所帮助 - 如果您需要更有针对性的建议，请发布链接或具体的代码示例。

【讨论】：