如何在一个媒体查询中定位iPhone 3GS和iPhone 4? [英] How to target iPhone 3GS AND iPhone 4 in one media query?
问题描述
我已经确定最好的方法是使用 @media
从CSS3规格。
因此,这是我的媒体查询时间:
@media screen and(max-width:1000px){...}
以上是适用于小型桌面和笔记本电脑屏幕。
@media max-width:700px){...}
笔记本电脑屏幕。
@media屏幕和(max-device-width:480px){...}
以上内容适用于iPhone 3GS和移动设备。
然而,新的iPhone 4与史蒂夫·乔布斯的所有唱歌全跳舞视网膜显示器意味着它的像素比为2-1意味着1像素实际上显示为浏览器2x2像素的分辨率(960x640 - 意味着将触发iPad布局而不是移动设备布局),因此这需要另一个媒体查询(目前只有webkit支持):
@media screen and(-webkit-min-device-pixel-ratio:2){...}
现在,事情是...我想要我的漂亮闪亮的新iPhone 4布局合并与iPhone 3GS和移动设备布局,因为他们都有完全相同的内部CSS代码,
因此提出我的问题;
如何创建 @media
因为iPhone和iPod触摸测量 max-device-width
在逻辑像素而不是物理像素,即使与视网膜显示器(因为他们应该),用于iPhone的原始媒体查询应该足够:
@media only screen and(max-device-width:480px){
/ * iPhone CSS rules here * /
}
您只需要 min-device-pixel-ratio:2)
如果您需要分别定位Retina显示。
I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well.
I have established that the best method is to use @media
from the CSS3 spec.
As such these are my media queries at the minute:
@media screen and (max-width: 1000px) { ... }
Above is for small desktop and laptop screens.
@media screen and (max-width: 700px) { ... }
Above is for the iPad and VERY small desktop/laptop screens.
@media screen and (max-device-width: 480px) { ... }
Above is for iPhone 3GS- and mobile devices in general.
However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
Now, the thing is... I want my nice shiny new iPhone 4 layout amalgamated with the iPhone 3GS and mobile device layout as they will both have exactly the same inner CSS code,
Therefore making my question;
How do I create an @media
rule that points both the iPhone 4, 3GS and other mobiles to the same styles?
Because the iPhone and iPod touch measure max-device-width
in logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough:
@media only screen and (max-device-width: 480px) {
/* iPhone CSS rules here */
}
You'll only need (-webkit-min-device-pixel-ratio: 2)
if you need to target the Retina display separately.
这篇关于如何在一个媒体查询中定位iPhone 3GS和iPhone 4?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!