正确的媒体查询语法CSS iPhone

我能够正确地格式化网站使用在线resonsive设计测试仪和CSS声明设备，例如，@media only screen and (max-width: 480px) {，但在实际的iPhone测试的网站时，这些CSS声明没有被由浏览器计算。正确的媒体查询语法CSS iPhone

我也试过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？

来源

2012-03-29 Nick B

尝试把媒体查询在您的样式表的底部，我知道我之前有同样的问题，并且解决它，奇怪的是。您也可以使用此类工具测试查询：http://quirktools.com/screenfly/ – 2012-03-29 22:58:21

我已成功能够针对iphone和使用CSS声明设备：

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

例如。感谢您的贡献。

来源

2012-04-14 00:27:39

呃......我完全不相信媒体的质疑做这个任务。

他们都失败了我太多的时间。如果你没有任何运气，去检测设备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'); 
}

来源

2012-03-29 22:54:01

正确的媒体查询语法CSS iPhone

回答

相关问题