[ html, javascript ] 모바일(mobile)에서 사이트가 PC에서의 픽셀크기 기준으로 작동하게 하기(반응형 하려면 필요)

※ [ html, javascript ] 모바일에서 사이트가 PC에서의 픽셀크기 기준으로 작동하게 하기(반응형 하려면 필요)

 

 

<!-- 모바일에서 사이트가 PC에서의 픽셀크기 기준으로 작동하게 하기(반응형 하려면 필요) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

 

- head.jspf에 meta 코드만 저렇게 입력을 해주어도 모바일 모드에서 자동으로 zoom이 되지 않는다.

- 원하는 경우 zoom은 가능(당겨볼 수 있음) 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

※ 기존 작업 내용 

 

 

<!-- 모바일에서 사이트가 PC에서의 픽셀크기 기준으로 작동하게 하기(반응형 하려면 필요) -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->

// 아이폰 용 끄기
// 1) Pinch Zoom 끄기
document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
}, false);

// 아이폰 용 끄기
// Double tab Zoom 끄기
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
}, false);

 

- 내 아이폰에서는 head.jspf에 meta코드와 app.js에 javascript를 써주었는데 모바일 모드에서 zoom이 계속 되어버림.

- 샘 사이트는 코드가 잘 적용되어 zoom이 되지 않음.

- 나의 해결 방법으로 글 상단의 meta 코드(head.jspf)를 수정해주었음.

    - meta코드를 변경해주니 javascript코드를 app.js에서 지워주어도 모바일 모드에서 자동 zoom이 되지 않았음.