mobile viewport 및 기타설정

2021. 12. 21. 12:06ㆍStudy/Publishing

viewport meta tag

모바일 기기에서 Media Query가 예상한대로 작동하기 위해서는 웹 브라우저의 가상 해상도를 물리적 해상도와 일치시킬 필요가 있습니다.
모바일 웹브라우저들은 웹브라우저의 가상 해상도를 조절할 수 있는 viewport meta tag를 지원합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

viewport의 속성

width viewport의 가로 크기를 조정합니다. 일반적인 숫자값이 들어 갈 수 도 있고, device-width와 같은 특정한 값을 사용할 수도 있습니다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다.
height viewport의 세로 크기를 조정합니다.
initial-scale 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성합니다.
minimun-scale viewport의 최소 배율값, 기본값은 0.25입니다.
maximum-scale viewport의 최대 배율값, 기본값은 1.6입니다.
user-scalable 사용자의 확대/축소 기능을 설정. 기본 값은 yes입니다.

 

 

정의된 속성 값

device-width 기기의 가로 넓이 픽셀 값 (웹 페이지의 가로(width)값은 기기가 사용하는 가로 넓이 값(device-width)만큼 적용하여 사용하라는 의미
device-height 기기의 세로 높이 픽셀 값

 

 

주의사항

  • content보다 작은 viewport width/height를 설정하면 무시됩니다.
  • viewport에서 initial-scale을 설정하지 않고, width/height를 설정하면 전체 화면이 표시됩니다.
  • viewport에서 initial-scale도 width/height를 설정하지 않으면 width=980px / height=1091px이 됩니다.
  • 표시 영역과 contents의 크기가 일치하지 않을때 initial-scale을 설정하면 의도하지 않은 layout이 발생합니다.

 

 

iPhone Splash Screen

스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다.  스플래시 스크린을 추가하는 방법은 간단합니다.

<link rel="apple-touch-startup-image" href="startup.png">

해당 이미지의 사이즈가 320 x 480 px 로 맞춰야 하며, 
전체화면 모드에서 설명한 apple-mobile-web-app-capable Meta 태그를 적용해야 스플래시 스크린도 적용됩니다.

 

 

iPhone 폰트사이즈 고정하기

모바일 디바이스의 경우 화면을 가로/세로로 전환할 수 있습니다. 웹킷 기반의 웹 브라우저는 뷰포트의 크기에 따라 폰트 사이즈가 변경되는데 보통 그러한 기능이 화면을 깨트리는 경우가 발생하여 CSS를 이용해 폰트 사이즈를 고정시키기도 합니다. 폰트 사이즈를 고정시키려면 고정시킬 곳에 다음 CSS를 추가하면 됩니다.

*{-webkit-text-size-adjust:none;}

-webkit-text-size-adjust : auto | none | N% (default auto)

 

 

iPhone 상단 바 컬러 설정 iPhone only

아이폰 상단의 상태 Bar의 경우 3가지 테마를 Meta 태그로 설정할 수 있습니다. 특별한 기능이 있는건 아니지만 디자인을  좀 더 통일성 있게 만들수 있다는 점에서 원하는 색상으로 적용하시면 됩니다.

<!-- 기본 밝은 계열 -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">

<!-- 검정색 --> 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 반투명 검정색 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

 

 

iPhone4 레티나 디스플레이 미디어쿼리

.myImage {height: 40px; width: 100px; -webkit-background-size: 100px 40px; background: url("images/myImage.jpg");}

@media screen and (-webkit-device-pixel-ratio: 2) {
	.myImage {background: url("images/myImage@2x.jpg"); }
}

고해상도의 아이폰4가 출시하면서 우리는 고해상도의 이미지를 제공하여 iphone4 사용자의 만족도를 극대화할수 있습니다. 320x480의 2배인 640x960의 레티나 디스플레이

http://aralbalkan.com/demos/high-dpi-images/ iphone4로 봤을때 이미지의 흐림 현상해결
결론은 이미지를 두배로 만들고 코딩시 320에 맞춰 코딩(CSS)했다. 1.5는 480기준으로 봤을때의 결과다.

 

 

iPhone 홈 화면 아이콘 등록

아이폰의 홈화면 등록하기에 사용될 아이콘을 저장한다. (반사광은 이미지에 넣는것이 아니라 코드로 넣어준다.)

홈 아이콘 사이즈 114px × 114px
<!-- 반사광 효과를 주는 경우 -->
<link rel="apple-touch-icon" href="home-icon-name.png">

<!-- 반사광 효과가 없는 경우  -->
<link rel="apple-touch-icon-precomposed" href="home-icon-name.png">

좌측에 반사광

 

 

iPhone 홈 화면 전체 화면 모드

웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다. 
단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다.

 

<meta name="apple-mobile-web-app-capable" content="yes">

 

네이버나 다음의 모바일웹사이트에 가보시면 주소창이 사라지는걸 확인할수 있습니다. 
아이폰과 안드로이드를 테스트한결과 둘다 사라집니다. 하지만 개인이 지식없이 만든 페이지의 대부분은 아이폰에서는 어떨지몰라도 안드로이드쪽에서는 100% 주소창이 남아있는 결과를 초래합니다. 
결국 주소창만큼 페이지가 아래로 밀리게되고 보여지는 부분은 9/10이 되겟죠. 
손으로 올려보면 주소창이 사라지지만 그건 근본적인 해결방안이 아닙니다.
위 사항은 자바스크립트문으로 간단하게 처리가 됩니다.

자바스크립트의 window.navigator.standalone의 결과값(true/false)으로 전체화면 모드 유무를 알 수 있습니다.
추가로 자바 스크립트로 웹 페이지에 접속시 자동으로 스크롤을 상단의 주소 표시줄만큼 내려 상단의 주소표시줄이 사라진 것 처럼 만들수 있습니다.

 

window.addEventListener("load",function(){ 
	setTimeout(scrollTo,0,0,1); 
},false);

 

 

회전에 따른 다른 CSS적용하기

ex1) JavaScript 이용

function orient(){
  switch(window.orientation){
    case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";break;
    case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";break;
    case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";break;
  }
}
window.onload = orient();
<body onorientationchange="orient();">
</body>

 

ex2) 미디어쿼리 이용

@media screen and (max-width: 320px){
	세로일때.. 처리 css 
}

@media screen and (min-width: 321px){
	가로일때..처리 css
}

@media all and (orientation:portrait){
	세로일때..처리 css
}

@media all and (orientation:landscape){
	가로일때..처리 css
}

 

 

기본 어플 호출하기

전화걸기   : <a href="tel:1588-2120 ">블루웹 고객센터</a>
문자보내기 : <a href="sms:010-0000-0000">문자보내기</a>
메일보내기 : <a href="mailto:aaa@nate.com">메일보내기</a>

아이폰 사파리에서 전화번호 링크를 마음대로 하는 경우가 있는데 이럴 경우 아래 태그를 넣어준다.
</meta name = "format-detection" content = "telephone=no">

 

 

HTML5 미지원 브라우저를 위해 conditional comment를 입력한다.

 

ie8 이하버전의 대처법

html5에는 여러가지 새로운 요소들이 등장했으나, 낡은 브라우저들은 이것을 모르기때문에 낡은 브라우저가 새 요소들을 인식할 수 있도록 스크립트로 처리가 가능함. 
아래 스크립트를 문서 <head></head>사이세 넣으면 ie9 이하버전에서 html5요소를 인식한다. 

<!?[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]?>

 

 

css Reset

새로운 요소를 inline요소인지 block 요소인지 브라우저는 모르기때문에 아래와 같이 선언해 준다.

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption{ 
    display: block 
}

 

 

터치 오류를 줄여라

사용자가 터치하는 영역은 44px*44px를 기준으로 하세요.
손가락으로 터치하는 면적이 최소 이정도는 확보되어야 오터치를 줄일수 있습니다.
너무 작은 경우 링크 영역 주변에 다른 링크요소가 없으면 크게 상관이 없을수도 있겠지만 다른 링크요소들과 함께 44*44 이내에 다닥다닥 붙어있다면 원하는 것을 터치하지 못할 확률이 높아집니다.

 

 

 

 

'Study > Publishing' 카테고리의 다른 글

mobile 코딩 시 초기 세팅  (0) 2021.12.23
모바일 CSS 스타일링  (0) 2021.12.22
mobile web  (0) 2021.12.21
a href=# 클릭 시 상단 이동 방지  (0) 2021.12.08
SVG  (0) 2021.12.06

관련글

댓글 0

티스토리툴바