Question

我能够使用在线resonsive设计测试器和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');
}

Answer 2

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

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

例如，

。感谢您的贡献。

适当的媒体查询语法CSS Iphone

2 个答案: