靶向iPhone 4，并与媒体5分别查询

我有这些媒体查询应用不同的样式为iPhone 4和iPhone 5靶向iPhone 4，并与媒体5分别查询

/* iPhone 4 (landscape) */ 
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape) { 
    .background img { 
     height: 5px; 
    } 
} 
/* iPhone 4 (portrait) */ 
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait) { 
    .background img { 
     height: 10px; 
    } 
} 
/* iPhone 5 (landscape) */ 
@media only screen and (min-width:320px) and (max-width:568px) and (orientation:landscape) { 
    .background img { 
     height: 245px; 
    } 
    .logo img { 
     height: 205px; 
     width: 205px; 
    } 
} 
/* iPhone 5 (portrait) */ 
@media only screen and (min-width:320px) and (max-width:568px) and (orientation:portrait) { 
    .background img { 
     height: 210px; 
    } 
    .logo img { 
     height: 170px; 
     width: 170px; 
    } 
    .top-content h2 { 
     font-size: 1.8em; 
     line-height: 120%; 
     margin-bottom: 20px; 
    } 
    .main-container { 
     margin-top: 30px; 
     margin-left: 15px; 
     margin-right: 15px; 
    } 
}

的问题是，在iPhone 5，iPhone 4的样式过于应用。我怎样才能防止这一点？

来源

2013-12-21 Yan

您好燕，欢迎堆栈溢出。将来，请缩进代码示例，并在编辑器中将它们标记为代码，以便它们可以更容易地语法突出显示和理解。谢谢！ – janfoeh

您不应该需要单独的媒体查询来说明不同的垂直视口大小。例如，考虑使用“固定”定位。 – Dai

你能举个例子吗？ – Yan

另一个有用的媒体功能是设备宽高比。

请注意，iPhone 5没有16：9的宽高比。实际上是40:71。

iPhone < 5: 
@media screen and (device-aspect-ratio: 2/3) {} 

iPhone 5: 
@media screen and (device-aspect-ratio: 40/71) {} 

iPad: 
@media screen and (device-aspect-ratio: 3/4) {}

参考：Media Queries @ W3C

来源

2013-12-21 13:30:14

这为我工作。谢谢！ – jimmyplaysdrums

除了亚当的有用的答案我已经扩大这个进一步，试图把我的CSS，只是iPhone和iPad在我的情况下，两个方向。下面可能是任何人都希望在这个问题有用：

/* iPhone 5/5S Retina Display Portrait */ 
@media screen and (device-aspect-ratio: 40/71) and (max-device-width: 640px) and (orientation:portrait) {} 

/* iPhone 5/5S Retina Display Landscape */ 
@media screen and (device-aspect-ratio: 40/71) and (max-device-width: 640px) and (orientation:landscape) {} 

/* iPad 3/4/Air Retina Display Portrait */ 
@media screen and (device-aspect-ratio: 3/4) and (max-device-width: 1536px) and (orientation:portrait) {} 

/* iPad 3/4/Air Retina Display Landscape */ 
@media screen and (device-aspect-ratio: 3/4) and (max-device-width: 1536px) and (orientation:landscape) {}

来源

2014-01-04 04:01:20 user275511

为特定的iPhone 4屏幕媒体是如下：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) 
{ 
    ... 
}

来源

2017-03-20 12:48:33 SUBHRANSU

靶向iPhone 4，并与媒体5分别查询

回答

相关问题