iPhone 5的CSS媒体查询

Question

iPhone 5有一个更长的屏幕，它不捕捉我的网站的移动视图。什么是新的响应式设计查询的iPhone 5，我可以结合现有的iPhone查询？

我现在的媒体查询是这样的：

@media only screen and (max-device-width: 480px) {} 

Answer 1

另一个有用的媒体功能是device-aspect-ratio。

请注意，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) {}

iPhone 6：
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6加：
@media screen and (device-aspect-ratio: 16/9) {}

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

参考：
Media Queries @ W3C
iPhone Model Comparison
Aspect Ratio Calculator

Answer 2

有了这个，我信用this blog：

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) { 
    /* iPhone 5 only */ 
} 

记住它反应了iPhone 5，而不是特定的iOS版本安装在所述设备上。

要使用现有版本进行合并，你应该能够逗号分隔它们：

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) { 
    /* iPhone only */ 
} 

注：我没有测试上面的代码，但我测试过用逗号分隔@media查询之前，他们工作得很好。

请注意，上述可能会遇到一些其他共享相似比率的设备，如Galaxy Nexus。这是一个额外的方法，将只针对具有640px（560px由于一些奇怪的显示像素异常）和960px（iPhone < 5）和1136px（iPhone 5）之一的尺寸的设备。

@media 
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px), 
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) { 
    /* iPhone only */ 
} 

Answer 3

你应该把“-webkit-min-device-pixel-ratio”设置为1.5来捕捉所有的iPhone？

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) { 
/* iPhone only */ 
} 

Answer 4

你可以得到你的答案很容易对iPhone5的与移动设备的媒体特征数据库的其他智能手机一起：

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

您甚至可以在同一网站上的测试页上获取您自己的设备值。

（免责声明：这是我的网站）

Answer 5

无响应的工作对我来说靶向phonegapp应用。

如下面的link分，下面的解决方案工作。

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { 
    // css here 
} 

Answer 6

对我来说，是做了工作的查询是：

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) 

Answer 7

所有这些问题的答案上面列出，使用max-device-width或max-device-height媒体查询，遭受很强的错误：他们也瞄准很多其他受欢迎的移动设备（可能是不需要的，从未测试过，或将在未来上市）。

此查询将适用于任何具有较小屏幕的设备，并且可能会损坏您的设计。

结合类似的设备特定媒体查询（HTC，三星，iPod，Nexus ...），这种做法将启动定时炸弹。对于debigging，这个想法可以让你的CSS成为一个不受控制的spagetti。你永远不能测试所有可能的设备。

请注意，只有媒体查询始终瞄准的iPhone5并没有别的是：

/* iPhone 5 Retina regardless of IOS version */ 
@media (device-height : 568px) 
    and (device-width : 320px) 
    and (-webkit-min-device-pixel-ratio: 2) 
/* and (orientation : todo: you can add orientation or delete this comment)*/ { 
       /*IPhone 5 only CSS here*/ 
} 

注意确切的宽度和高度，而不是最大宽度在这里检查。

---

现在有什么解决方案？如果你想要写一个网页，将寻找所有可能的设备好，最好的做法是使用降解

/*退化模式 我们正在检查屏幕宽度只有 肯定的是，这将改变从纵向转向景观*/

/*css for desktops here*/ 

@media (max-device-width: 1024px) { 
    /*IPad portrait AND netbooks, AND anything with smaller screen*/ 
    /*make the design flexible if possible */ 
    /*Structure your code thinking about all devices that go below*/ 
} 
@media (max-device-width: 640px) { 
/*Iphone portrait and smaller*/ 
} 
@media (max-device-width: 540px) { 
/*Smaller and smaller...*/ 
} 
@media (max-device-width: 320px) { 
/*IPhone portrait and smaller. You can probably stop on 320px*/ 
} 

如果您的网站访问者的30％以上来自手机，把这个方案颠倒，提供移动优先的方法。在这种情况下使用min-device-width。这将加快移动浏览器的网页渲染速度。

Answer 8

AFAIK没有iPhone使用1.5

iPhone 3G/3GS的像素比：（-webkit装置像素比：1） iPhone 4G/4GS/5G：（-webkit设备像素2）

Answer 9

只是一个非常快速的补充，因为我一直在测试一些选项，并一路错过了这个。确保你的页面有：

<meta name="viewport" content="initial-scale=1.0"> 

Answer 10

/* iPad */ 
@media screen and (min-device-width: 768px) { 
    /* ipad-portrait */ 
    @media screen and (max-width: 896px) { 
     .logo{ 
      display: none !important; 
     } 
    } 
    /* ipad-landscape */ 
    @media screen and (min-width: 897px) { 

    } 
} 
/* iPhone */ 
@media screen and (max-device-width: 480px) { 
    /* iphone-portrait */ 
    @media screen and (max-width: 400px) { 

    } 
    /* iphone-landscape */ 
    @media screen and (min-width: 401px) { 

    } 
} 

Answer 11

iPhone 5在纵向&景观

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

/* styles*/ 
} 

iPhone 5在景观

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/ 

} 

iPhone 5在纵向

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
/* styles*/ 

}