blocks|key|472738|text|对我来说，完成这项工作的查询是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|472739|only+screen+and+(device-width:+320px)+and+(device-height:+568px)+and+(-webkit-device-pixel-ratio:+2)|code-block|syntax|javascript|472740|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

for me, the query that did the job was:

<pre><code>only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
</code></pre>

blocks|key|255889|text|纵向和横向的iPhone+5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|255890|@media+only+screen+
and+(min-device-width+:+320px)+
and+(max-device-width+:+568px)+{

/*+styles*/
}|code-block|syntax|javascript|255891|景观中的iPhone+5|255892|@media+only+screen+
and+(min-device-width+:+320px)+
and+(max-device-width+:+568px)+
and+(orientation+:+landscape)+{+
/*+styles*/

}|255893|纵向iPhone+5|255894|@media+only+screen+
and+(min-device-width+:+320px)+
and+(max-device-width+:+568px)+
and+(orientation+:+portrait)+{+
+/*+styles*/

}|255895|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

iPhone 5 in portrait &amp; landscape

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

/* styles*/
}
</code></pre>

iPhone 5 in landscape

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

}
</code></pre>

iPhone 5 in portrait

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

}
</code></pre>

blocks|key|255855|text|这些响应都不适用于我的目标是手机应用程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|255856|正如下面的link所指出的，下面的解决方案是可行的。|offset|length|255857|@media+screen+and+(device-height:+568px)+and+(orientation:+portrait)+and+(-webkit-min-device-pixel-ratio:+2)+{
++++//+css+here
}|code-block|syntax|javascript|255858|entityMap|0|LINK|mutability|MUTABLE|url|http://zsprawl.com/iOS/2012/09/css-media-queries-for-the-iphone-5/^0|0|5|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

None of the response works for me targeting a phonegapp App.

As the following <a href="http://zsprawl.com/iOS/2012/09/css-media-queries-for-the-iphone-5/" rel="noreferrer">link</a> points, the solution below works. 

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

blocks|key|255885|text|这只是一个非常快速的添加，因为我一直在测试一些选项，但一直错过了这一点。确保你的页面有：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|255886|<meta+name="viewport"+content="initial-scale=1.0">|code-block|syntax|javascript|255887|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just a very quick addition as I have been testing a few options and missed this along the way. Make sure your page has:

<pre><code>&lt;meta name="viewport" content="initial-scale=1.0"&gt;
</code></pre>

blocks|key|472712|text|在移动设备的媒体功能数据库中，您可以相当容易地获得iPhone5和其他智能手机的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|472713|http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html|offset|length|472714|你甚至可以在同一网站的测试页面上获得你自己的设备价值。|472715|(免责声明:这是我的网站)|472716|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|29|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

You can get your answer fairly easily for the iPhone5 along with other smartphones on the media feature database for mobile devices:

<a href="http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html" rel="nofollow">http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html</a>

You can even get your own device values on the test page on the same website.

(Disclaimer: This is my website)

blocks|key|255878|text|afaik+no+iPhone使用的像素比率为1.5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|255879|iPhone+3G+/+3GS：(-webkit-device-pixel-ratio:+1)+iPhone+4G+/+4GS+/+5G：(-webkit-device-pixel-ratio:+2)|255880|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

afaik no iPhone uses a pixel-ratio of 1.5

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1)
iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

blocks|key|472756|text|/*+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)+{+

++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|472757|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>/* 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) { 

 }
}
</code></pre>

blocks|key|472689|text|你也许应该把"-webkit-min-device-pixel-ratio“降到1.5来捕获所有的iPhones？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|472690|@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+*/
}|code-block|syntax|javascript|472691|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You should maybe down the "-webkit-min-device-pixel-ratio" to 1.5 to catch all iPhones ?

<pre><code>@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 */
}
</code></pre>

The iPhone 5 has a longer screen and it's not catching my website's mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries?

My current media query is this:

<pre><code>@media only screen and (max-device-width: 480px) {}
</code></pre>

iPhone 5 CSS media query

响应式设计

数据库

iPhone 5的屏幕更长，不能捕捉到我网站上的手机画面。iPhone 5有哪些新的响应式设计查询，我可以与现有的iPhone查询结合使用吗？我目前的媒体查询是：@media only screen and (max-device-width: 480px) {}

问iPhone 5 CSS媒体查询
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPhone 5 CSS媒体查询EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPhone 5 CSS媒体查询
EN