iPhone 5的CSS媒体查询(iPhone 5 CSS media query)

在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) {}

参考：
媒体查询@ W3C
iPhone机型比较
长宽比计算器

Answer 2:

有了这个，我贷到这个博客 ：

@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之前的查询，他们工作得很好。

注意，以上可能会碰到它们共享类似的比率，如银河的Nexus一些其他设备。 这里是一个将目标（由于一些奇怪的显示像素的异常560像素），其具有的640像素一个维度仅设备和（iPhone <5）和1136px（iPhone 5）960像素之间的一个额外的方法。

@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:

所有这些问题的答案上面列出，使用max-device-width或max-device-height的媒体查询，从非常强的错误受苦。他们还瞄准了很多其他流行的移动设备 （可能是不必要的和从来没有测试，或将打在未来的市场）。

该查询将用于具有更小的屏幕 ，而且很可能你的设计将被打破任何设备工作。

与同类设备特定的媒体查询相结合（对于HTC，三星，iPod的的Nexus ...）这种做法将推出一个定时炸弹。 对于debigging，这种想法可以让你的CSS不受控制的通心粉。 你永远无法测试所有可能的设备。

请注意，只有媒体查询总是针对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 4:

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

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

Answer 5:

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*/

}

Answer 6:

响应没有工作对我来说靶向phonegapp应用。

正如下面的链接点，该解决方案如下工作。

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

Answer 7:

只是一个非常快速的增加，因为我一直在测试了几个选项，并错过了这个前进的道路。 请确保你的页面有：

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

Answer 8:

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

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

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

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

Answer 9:

AFAIK没有iPhone使用1.5的像素比

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

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:

你也许应该下来“-webkit-分设备像素比” 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 */
}

文章来源: iPhone 5 CSS media query