웹 디자이너 인 경우 버그는Apple 장치 (iPod, iPhone 및 iPad)에서 발생하는 Viewpoint Scaling이 사용자에게 직면했을 수 있습니다. 때로는 Apple 기기를 세로에서 가로 방향으로 회전 할 때 사이트가 확대되어 기기 너비보다 너비가 큰보기가 표시됩니다. 디자이너가 뷰포트 너비를 장치 너비로 설정했기 때문입니다. 이 버그의 작동 방식을 이해하기 위해 샘플 페이지를 디자인하고 iPad를 세로에서 가로로 회전 시켰습니다.
상기 버그에 대한 빠른 수정은 우리가뷰포트 메타 태그의‘maximum-scale = 1’ 이것은 당분간 문제를 해결하지만 장치 너비와 비슷한 최대 너비를 수정하기 때문에 페이지를 더 이상 확대 / 축소 할 수 없습니다.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
이 빠른 수정 사항은 완벽한 솔루션이 아닙니다. @mathias, @cheeaun 및 @jdalton과 같은 디자이너의 노력을 통해 이제 영구적 인 솔루션을 얻기 위해 <head> 섹션에 추가 할 수있는 자바 스크립트가 있습니다. 이 솔루션에서는 페이지를 확대 / 축소 할 수 있습니다.
<script type="text/javascript">
(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));
</script>이들은 지금까지 디자이너가 생각 해낸 유일한 솔루션입니다. 그러나이 버그를 고칠 다른 버그가 있다면 의견을 보내 주시기 바랍니다.
코멘트