通过媒体查询分别定位iPhone 4和5 [英] Targetting iPhone 4 and 5 separately with media queries
本文介绍了通过媒体查询分别定位iPhone 4和5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这些媒体查询,可以为iPhone 4和iPhone 5应用不同的样式
I have these media queries to apply different styles for iPhone 4 and iPhone 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的样式也被应用了.我该如何预防?
The problem is that on iPhone 5, the styles for iPhone 4 are applied too. How can I prevent this?
推荐答案
另一个有用的媒体功能是device-aspect-ratio.
Another useful media feature is device-aspect-ratio.
请注意,iPhone 5没有16:9的宽高比.实际上是40:71.
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 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) {}
参考: @ W3C上的媒体查询
这篇关于通过媒体查询分别定位iPhone 4和5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文