휴대폰에 적응형 줌 디스플레이를 생성하는 JS
예 1:
<script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigator.userAgent.toLowerCase(); var result = /android (\d+\.\d+)/.exec(ua); if (result){ var version = parseFloat(result[1]); if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+scale+', maximum-scale = '+scale+', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } } else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); } </script>
예 2:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { var viewportmeta = document.querySelector('meta[name="viewport"]'); if (viewportmeta) { viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'; document.addEventListener('touchstart', function () { viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6'; }, false); document.addEventListener('orientationchange', function () { viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'; }, false); } } }); </script>
예 3:
<meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection">
요약:
1. 사실 어렵지 않아요. 먼저 웹페이지 코드 헤드에 뷰포트 메타 태그 줄을 추가합니다.
2. 절대 너비를 사용하지 마세요. 웹 페이지는 화면 너비에 따라 레이아웃을 조정하므로 절대 너비의 레이아웃을 사용할 수 없으며 절대 너비가 있는 요소를 사용할 수도 없습니다.
3. 상대 크기 글꼴은 절대 크기(px)를 사용할 수 없고 상대 크기(em)만 사용할 수 있습니다.
4. 유동 격자 "유동 격자"의 의미는 각 블록의 위치가 고정되지 않고 떠 있다는 것입니다.
.main { 부동: 오른쪽; 너비: 70% } .leftBar { 부동: 왼쪽: 25%;
5. 적응형 이미지(유동 이미지) '적응형 웹 디자인'은 레이아웃과 텍스트 외에도 이미지의 자동 크기 조정도 구현해야 합니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.