我在iPhone 5上...我开始更新我的网站,使用视网膜图像。一切都在Safari中完美运行。出于某种原因,我body
的背景图像没有使用它,而且它的超级模糊。有任何想法吗?这是一个错误吗?这就是我对视网膜显示器的媒体查询所具有的:
body {
background:
url(../images/logo.png) no-repeat,
url(style/images/dark/bg5.jpg) 50% 0 no-repeat,
url(style/images/dark/bg5_repeater.png) repeat bottom;
background-attachment: fixed;
background-color:#09273e;
color:#e4e4e4;
background-position: 15px 10px, top, bottom;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
body, #header {
background: url(../images/dark/bg5_repeater@2x.png) repeat;
background-size: 70px 70px;
}
}
以下是我的bitbucket上文件和代码行的链接:http://bit.ly/Sxevfg
以下是iOS 7.1.1上Safari和Chrome之间的一些截图。
非常感谢
答案 0 :(得分:1)
Chrome renders pages with Safari's engine(Apple允许在iOS上使用的唯一浏览器引擎),因此这必须是应用内Safari(UIWebView)和实际Safari之间的区别。
但我的回答是你不应该实施视网膜税。双分辨率图像是否真的值得将用户的移动数据使用量增加一倍,或者加倍页面的加载时间?
(如果对Network Information API的工作继续进行,也许我们会获得带宽的媒体查询...)
答案 1 :(得分:1)
可能是图像未保存为渐进式图像。当保存为渐进式时,它可以解决问题。