免责声明:我知道这些类型的问题已经被问到死,但我找不到对我的具体案例有帮助的问题。
我正在做一个移动网络应用程序,我不能在其中使用响应式样式(=以百分比或 em 等定义大小);一切都需要像素完美。到目前为止,我使用的布局是 640 像素 宽 (Retina)。目标平台是小型 iOS 设备(iPhone、iPod touch)、Android 手机和 Windows Phone。任何其他平台都是肉汁,但不受“官方”支持。
当我通过开发人员工具伪造用户代理时,它在桌面 Chrome 上看起来很棒。但是,当我在实际移动设备上对其进行测试时,缩放在不同平台上以不同的方式工作。 Android 似乎会诱导水平滚动,Windows Phone 说得越少越好。我目前没有用于测试它的 iPhone。
我想要的 是缩放 640 像素宽的布局以适应设备的宽度。用户不应该能够横向滚动,也不应该能够通过捏合来缩放。出于所有意图和目的,它应该看起来像一个本地应用程序。
我根据在 SO 和其他网站上找到的答案尝试了不同的突变,但我目前使用的视口(viewport)元标记看起来像这样;
<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,我对此持开放态度;然而,为每个操作系统/分辨率维护单独的样式表似乎非常不切实际。
最佳答案
这不起作用的原因是因为 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。
希望这对您有所帮助 - 如果您需要更有针对性的建议,请发布链接或具体的代码示例。
关于css - 视网膜移动网络应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16402523/