是否可以只有<meta name =“viewport”content =“width = device-width”>

我有一个960px宽的网站，我设法让它响应手机。所以我的款式适用于767px以下的设备，在手机和小型平板电脑上看起来不错。是否可以只有<meta name =“viewport”content =“width = device-width”>

然后iPad portrait来玩。它在landscape上看起来不错，但不是在portrait上，只要我在头中有<meta name="viewport" content="initial-scale=1,maximum-scale=1,width=device-width">。

然后我创建了不同的jquery events来检查portrait并更改viewport但每次我都会遇到一些问题。

这是我到目前为止。但代码不是我的问题。我的问题是，可以在头文件中保留<meta name="viewport" content="width=device-width">，我在iPad，iPhone，android，samsung，kindle fire（模拟器上）测试过，现在它们似乎工作正常。所以我想知道我是否需要initial-scale=1,maximum-scale=1？

我的代码并不真的很好。

var isiPad = navigator.userAgent.match(/iPad/i) != null; 

if(isiPad){ 

    jQuery(window).bind('orientationchange', function(e) { 
     switch (window.orientation) { 

     case 0: //port 
     jQuery('meta[name=viewport]').attr('content','width=device-width'); 
     alert('1'); 
     break; 

     case 180: //port 
     jQuery('meta[name=viewport]').attr('content','width=device-width'); alert('2'); 
     break; 

     } 
    }); 

} 
else if(!isiPad){ 
    jQuery('meta[name=viewport]').attr('content','width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1'); 
}

来源

2013-05-14 user1889007

，你可以在头使用元作为

<meta name="viewport" content="width=device-width, height=device-height" >

可以使用@media标签的CSS做到这一点

@media only screen and (device-width: 768px) { 
    /* For general iPad layouts */ 
} 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 
    /* For portrait layouts only */ 
} 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { 
    /* For landscape layouts only */ 
}

来源

2013-05-14 07:04:12

是否可以只有<meta name =“viewport”content =“width = device-width”>

回答

相关问题