Css媒体查询不适用于iPhone

-1

我已经让我的网站响应，媒体查询对于像iPad，桌面屏幕但在iphone5上的所有设备都正常工作，它甚至不考虑查询。Css媒体查询不适用于iPhone

下面是代码：

/* iPhone 5/5S Retina Display Landscape */ 
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    body { 
    background:url(http://data.hinhnenso1.com/du-lieu/hinhnenso1/iphone-5/tong-hop/alovn-007.jpg)no-repeat fixed; 
    background-size: 640px 1136px; 
    height:1136px; 
    width:640px; 
    } 
}

我想设置一个回地面 - 形象，反应灵敏的网站，但它似乎剂量不工作。图像剂量不会响应背景大小。因此看起来很模糊。

我对这个问题进行了很多研究，并尝试各种查询组合来选择iPhone屏幕来呈现提供的CSS，但似乎没有任何工作。

任何建议将是一个很大的帮助！

来源

2014-05-07 Neal

图像模糊，因此总是会出现模糊：http://data.hinhnenso1.com/du-lieu/ hinhnenso1/iphone-5/tong-hop/alovn-007.jpg – Turnip

@ 3rror404您应该将其添加为答案lol –

..此外，视网膜图像应该是您希望显示它们的尺寸的两倍。您的图像宽度为640px，并且您尝试以640px宽显示，因此即使图像很锐利，在视网膜显示屏上它也会显得模糊 – Turnip

-1

好的，你的代码有很多问题。

1）尽管iPhone 5具有640px x 1136px的真实分辨率，但浏览器实际上报告其分辨率为320px x 568px，并使用两个ACTUAL像素来显示这些VIRTUAL像素中的每一个像素。

这意味着：

你的宽度应为320像素不是640像素。
你的身高应该是568px而不是1136px。
你的背景，大小应为320像素568px

2）你的形象是正确的大小。视网膜图像应该是其预期显示尺寸的两倍。但是，您的图像很模糊。它应该是全尺寸的尖锐，否则它总是看起来模糊。

您可能有更多的运气与下面的CSS：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    body { 
    background:url(http://data.hinhnenso1.com/du-lieu/hinhnenso1/iphone-5/tong-hop/alovn-007.jpg)no-repeat fixed; 
    background-size: 320px 568px; 
    height:568px; 
    width:320px; 
    } 
}

-Related topic

来源

2014-05-07 12:11:47 Turnip

谢谢，我只是将代码应用于上述 – Neal

Css媒体查询不适用于iPhone

回答

相关问题