1.viewport를 이용한 모바일 해상도 조절
-viewport 구조를 잘 알아두면 상황에 맞게 잘 활용할 수 있습니다.
-요즘은 안드로이드, iOS 모두 viewport를 지원하지만 렌더링 클라이언트 중에는 지원하지 않는 경우가 있을 수 있는데 이 경우 별도의 메타 태그를 통해 보완해 주면 됩니다.
|
<meta name=”HandheldFriendly” content=”true”> <meta name=”MobileOptimized” content=”720”> |
1.1.viewport 태그의 기본 구조
|
<meta name=”viewport” content=”user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0”/> |
위의 태그는 확대/축소를 하지 못하도록 만들어 놓은 태그로 모바일 페이지에 적용 된 예시 입니다.
1.1.1.width=device-width
-컨텐츠를 디바이스 ( 모바일 기기 또는 PC ) 가로 사이즈에 맞춰 표현
-모바일, 테블릿 디바이스에 설정된 기본 width를 사용
1.1.2.initial-scale=1.0
-초기 표시 배율 ( 1.0이 기본, 꽉찬 페이지 )
1.1.3.maximum-scale=1.0
-최대 확대비율 ( 기본값 5.0, 범위 : 0 ~ 10.0 )
1.1.4.minimum-scale=1.0
-최소 확대비율 ( 기본값 5.0, 범위 0 ~ 10.0 )1.1.5.user-scalable=no
-확대/축소 설정 ( 기본값 yes )
-이 값을 no로 설정하면 사용자가 모바일에서 확대/축소 불가
1.2.기기 환경에 따른 style적용
-Style을 적용하기 위해서는 가로/세로, 가로 사이즈(3.5인치, 4.3인치, 5.2인치, 7인치, 10인치, PC 등)을 고려해야 합니다.
-기본 PC 버전을 공통으로 정의하고 특정 조건을 만족하면 다른 css가 적용되도록 합니다.
-모바일/PC 공용으로 개발 할 경우에는 %를 사용하는 것이 개발에 용이합니다.
-만약 px 단위로 크기를 조절 할 경우 모든 경우에 width를 조절해야 합니다.
|
@media screen and (max-width: 736px) and (orientation:landscape) { .loginLogo { display: none; } }
또는
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”> |
1.2.1.max-width: 736px
-device의 max-width를 통해 기기를 분류
-PC 브라우저의 경우 width를 조절 할 수 있기 때문에 max-width에 영향을 받음
1.2.2.orientation:landscape
-orientation은 portrait(세로), landscape(가로) 2가지가 있다.
-공통으로 선언 후에 landscape를 추가로 선언하거나 portrait와 landscape를 별도로 설정 할 수 있다.
2.테스트
chrome의 기능을 이용하여 손쉽게 모바일 테스트를 진행 할 수 있습니다.
-브라우저에서 F12를 눌러 개발자도구 창을 open합니다.
-왼쪽 상단의 디바이스 버튼을 클릭합니다.
-아래 버튼을 클릭하여 device를 변경할 수 있습니다.
-아래 버튼을 클릭하여 가로/세로를 변경할 수 있습니다.
3.안드로이드 Chrome 웹 디버깅
3.1.휴대폰을 디버깅 모드로 변경
-설정모드로 진입하여 디바이스 정보를 click
-소프트웨어 정보 click
-빌드번호를 7회 이상 클릭
-위의 단계까지 진행하면 개발자 옵션이 생긴다.
-USB 디버깅 모드 실행
3.2.PC 크롬에서 아래 주소로 접속 후 inspect 버튼 클릭
-chrome://inspect/#devices
3.3.자바스크립트 모바일 가로 세로 모드 구하기
−window.orientation 객체는 모바일에서만 존재 합니다. 따라서 orientation 객체에 대해서 null, undefined 검사를 해야 합니다.
3.3.1.Window 객체
|
var orientation = window.orientation; if(orientation != undefined){ if(orientation == 0){ // 세로 모드 (평소 사용하는 각도) }else if(orientation == -90){ // 가로 모드 (동영상 볼때 사용하는 각도) } } |
3.3.2.JQuery
|
$(window).on(“orientationchange”, function(event){ if(window.matchMedia(“(orientation: portrait)”).matches){ // 세로 모드 (평소 사용하는 각도) }else if(window.matchMedia(“(orientation: landscape)”).matches){ // 가로 모드 (동영상 볼때 사용하는 각도) } }); |
[출처] 모바일 웹 개발 방법|작성자 묵금