是否可以只有<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」>

回答

相關問題