1

我有一个960px广泛的网站，我设法让它对手机做出响应。所以我的风格适用于设备767px，它在手机和小型平板电脑上看起来不错。

然后 iPadportrait来玩。它看起来不错，landscape但portrait只要我有<meta name="viewport" content="initial-scale=1,maximum-scale=1,width=device-width">标题就不行。

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

这就是我到目前为止所拥有的。但代码不是我的问题。我的问题是，可以留<meta name="viewport" content="width=device-width">在标题中，我在 iPad、iPhone、android、三星、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');
}
4

1 回答 1

2

您可以在标题中使用元

<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-14T07:04:12.227 回答