Question

我有一个960px广泛的网站，我设法让它对手机做出响应。因此，我的样式适用于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，android，三星，点燃火（模拟器）上进行测试，它们现在看起来工作正常。所以我想知道我需要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

你可以在标题中使用meta

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

只需要<meta name =“viewport”content =“width = device-width”/>即可

1 个答案: