미디어 쿼리 및 기기 방향 변경

아래 코드가 있습니다. 무엇을 달성하고자하는 프리미디어 쿼리 및 기기 방향 변경

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

아이폰 (4)는 폭 (아이폰 4 갤럭시 S처럼 큰 해상도가 기기) 가로 세로에서 휴대 단말기의 변화 방향의 스타일을 전환하는 960 픽셀이므로 두 번째 규칙이 적용됩니다. 어떻게 달성 할 수 있습니까?

출처

2012-01-28 Illes Peter

아이폰에 방향이 바뀌면 버그가 있습니다. 자바 스크립트 수정에 대해서는 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

이것은 iPhone에서만 발생하지 않지만 Galaxy S (1st gen) –

미디어 쿼리 및 기기 방향 변경

답변

관련 문제