メディアクエリとデバイス方向変更

以下のコードがあります。私は何を達成したいことはiPhone 4が幅を有している肖像画から風景（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>

に向きを変えるモバイルデバイスのスタイルを切り替えることがあります2番目のルールが入るはずです。どのように達成するのですか？

出典

2012-01-28 Illes Peter

iPhoneの向きが変わるとバグが発生します。これはiPhone上でのみ発生するだけでなく、ギャラクシーS（第一世代）しませんジャバスクリプトの修正のためのthis gist

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

を参照してください。 –

メディアクエリとデバイス方向変更

答えて

関連する問題