[IOS] safari에서 확대 축소 막기

기존 모바일에서 확대 축소를 막기 위해선

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

코드만 추가해주기만 하면 정상적으로 작동이 됬습니다.

 

IOS 10 이후 새 기능으로 

 

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

가 추가됨과 동시에 user-scalable=no 만으로는 아이폰 사파리에서 확대 축소가 불가능해졌습니다.

 

오늘은  css의 touch-action 으로 모바일 확대 축소 막는 방법을 알아보겠습니다.

---

touch-action: pan-y;

---

를 사용하게 되면 세로 터치는 가능하게 되고 전체 확대는 불가능하게 됩니다.

 

juyeol.tistory.com/30

[IOS] safari에서 확대 축소 막기

 

모바일 기기에서 화면이 확대/축소되지 않도록 설정하기

 

요즘 나오는 대부분의 워드프레스는 반응형(Responsive)으로 나오기 때문에 모바일 기기에서는 자동으로 모바일 버전이 표시됩니다. 모바일 버전에서 손가락을 벌리거나 오므리면 화면이 확대/축소되지 않도록 설정하려면 다음 코드를 header.php 파일에 추가하도록 합니다.

 

인터넷 익스플로러(IE) 10 버전에서 제대로 작동하지 않는 경우 -ms-content-zooming: none | zoom 구문을 사용합니다(여기 참고). 가령 다음과 같은 CSS 코드를 스타일시트 파일에 추가하도록 합니다.

 

html { -ms-content-zooming: none; -ms-touch-action: pan-x pan-y; } // Source: stackoverflow

Disable pinch to zoom in IE10

 

 

모바일 기기에서 가로로 스크롤되지 않도록 하기

모바일 장치에서 가로(수평)로 스크롤되지 않도록 하려면 다음과 같은 코드를 시도해봅니다.

body{ width:320px; // 혹은 적당한 크기 또는 100% overflow-x:hidden; }

이 내용은 더 이상 유효하지 않다고 Matthew님께서 알려주셨습니다. 아이폰, 스마트폰 미디어 쿼리는 "아이패드, 아이폰, 스마트폰 등의 모바일 기기에 사용 가능한 미디어 쿼리"를 참고해보시기 바랍니다.

 

 

big-blog.tistory.com/1448

모든 최신 브라우저에서 페이지 확대 / 축소 수준을 감지하는 방법은 무엇입니까?