iphone - 正确的媒体查询语法 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 起作用。我缺少什么才能成功定位到 iPhone 3/4？

Answer 1

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

他们让我失望了太多次。如果运气不好，请使用 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');
}