正确的媒体查询语法CSS Iphone

Question

我能够使用在线共振设计测试器和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。要想成功锁定iPhone3/4，我还缺少什么？

Answer 1

我已经成功地使用css声明瞄准了iphone和设备：

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

例如。感谢您的贡献。

Answer 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');
}