媒體查詢和設備方向更改

我已經得到下面的代碼。我想實現的是從縱向（設備具有較大的分辨率像iPhone 4或銀河S）樣式的移動設備改變方向之間進行切換到橫向媒體查詢和設備方向更改

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 

    <title>KUBIK</title> 
    <style> 
     #mobile, 
     #tablet { display: none; } 

     @media screen and (max-width: 767px) { 
      body { background-color: #FF0000; } 
      #mobile { display: block; } 
     } 
     @media screen and (min-width: 768px) and (max-width: 1024px) { 
      body { background-color: #00FFFF; } 
      #tablet { display: block; } 
     }  
    </style> 

</head> 
<body> 
    <div id="mobile">MOBILE</div> 
    <div id="tablet">TABLET</div> 
</body> 
</html>

在景觀iPhone 4的寬度960px，所以第二條規則應該進來。我將如何實現這一目標？

來源

2012-01-28 Illes Peter

iPhone在方向切換時有錯誤。看到this gist爲JavaScript修復

// Rewritten version 
// By @mathias, @cheeaun and @jdalton 

(function(doc) { 

    var addEvent = 'addEventListener', 
     type = 'gesturestart', 
     qsa = 'querySelectorAll', 
     scales = [1, 1], 
     meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; 

    function fix() { 
     meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; 
     doc.removeEventListener(type, fix, true); 
    } 

    if ((meta = meta[meta.length - 1]) && addEvent in doc) { 
     fix(); 
     scales = [.25, 1.6]; 
     doc[addEvent](type, fix, true); 
    } 

}(document));

來源

2012-01-28 15:05:27 fuxia

這不僅發生在iPhone上，而且還發生在銀河S（第一代） – 2012-01-28 19:57:13

媒體查詢和設備方向更改

回答

相關問題