JS_javascript 기술을 사용하여 휴대폰에서 적응형 확대/축소 디스플레이 만들기

휴대폰에 적응형 줌 디스플레이를 생성하는 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. 사실 어렵지 않아요. 먼저 웹페이지 코드 헤드에 뷰포트 메타 태그 줄을 추가합니다.

826e39c2bbf62337fe9ed084a9f6b7f3

2. 절대 너비를 사용하지 마세요. 웹 페이지는 화면 너비에 따라 레이아웃을 조정하므로 절대 너비의 레이아웃을 사용할 수 없으며 절대 너비가 있는 요소를 사용할 수도 없습니다.

3. 상대 크기 글꼴은 절대 크기(px)를 사용할 수 없고 상대 크기(em)만 사용할 수 있습니다.

4. 유동 격자 "유동 격자"의 의미는 각 블록의 위치가 고정되지 않고 떠 있다는 것입니다.

.main { 부동: 오른쪽; 너비: 70% } .leftBar { 부동: 왼쪽: 25%;
5. 적응형 이미지(유동 이미지) '적응형 웹 디자인'은 레이아웃과 텍스트 외에도 이미지의 자동 크기 조정도 구현해야 합니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.