只有<meta name="viewport“content="width=device-width">可以吗

Question

我有一个960px wide网站，我设法让它对手机做出响应。因此，我的风格适用于767px系统下的设备，它在手机和小型平板电脑上看起来很不错。

然后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、安卓、三星、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');
}

Answer 1

您可以在header中使用meta as

<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 */
}