免责声明:我知道这些类型的问题已经被要求死亡,但我找不到任何帮助我的具体案例。
我正在做一个移动网络应用,我不能使用响应式样式(=以百分比或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,我对此持开放态度。但是,为每个操作系统/分辨率维护单独的样式表似乎非常不切实际。
答案 0 :(得分:0)
这不起作用的原因是因为initial-scale=0.5
并不意味着640的文档宽度将偏向320;而这表示用户在加载页面时看到的初始缩放级别。
我建议您将DOM宽度更改为320px,并将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。
希望这会有所帮助 - 如果您想要更有针对性的建议,请发布链接或特定代码示例。