正确的媒体查询语法 CSS Iphone答案

【问题标题】：Proper Media Query Syntax CSS Iphone正确的媒体查询语法 CSS Iphone
【发布时间】：2012-04-13 15:19:03
【问题描述】：

我能够使用在线响应式设计测试器和 css 声明（例如 @media only screen and (max-width: 480px) {）为设备正确格式化网站，但在实际 iphone 上测试网站时，浏览器不会计算这些 css 声明.

我也尝试过max-device-width 并将初始比例设置为<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>. 我还尝试了没有初始比例设置的先前声明。

我也试过：@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

还有：only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {

这些都没有针对 iphone 起作用。成功定位 iphone 3/4 缺少什么？

【问题讨论】：

尝试将媒体查询放在样式表的底部，我知道我之前也遇到过同样的问题，并且解决了它，奇怪的是。您还可以使用以下工具测试查询：quirktools.com/screenfly

标签： iphone css mobile media-queries device

【解决方案1】：

我已经成功地能够使用 css 声明定位 iphone 和设备：

@media all and (max-width: 480px)  {
    /* put iphone css formatting here */  
}

例如。感谢您的贡献。

【讨论】：

【解决方案2】：

呃...我根本不相信媒体查询可以完成这项任务。

他们让我失望了太多次了。如果您没有任何运气，请使用 JS 或服务器端解决方案来检测设备。也许去这个js：

var pixelRat = window.devicePixelRatio;
var screenWidth = screen.width;

//iPhone Retina Display
if ( pixelRat >= 2 )
{
  $('meta[name=viewport]').attr('content','initial-scale=.5, maximum-scale=.5');
  $('link[name=mainstyle').attr('href', 'css/iphoneHD.css');
}
//iPhone 3gs, 3g, Edge
else if ( pixelRat < 2 && screenWidth == 320 )
{
  $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0');
  $('link[name=mainstyle]').attr('href', 'css/iphone.css');
}
//iPad 1 and 2
else if ( pixelRat < 2 && screenWidth == 768 )
{
  $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0');
  $('link[name=mainstyle]').attr('href', 'css/mobile.css');
  $('link[name=loginpadstyle]').attr('href', 'css/loginpad.css');
}
//Mac OS X, Windows, Etc.
else
{
  $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0');
  $('link[name=mainstyle').attr('href', 'css/style.css');
}

【讨论】：