파워블로

HTML 모바일 화면 자유롭게 조절할수 있게 하기

-INTEREST- 2017. 6. 18. 19:55

인터넷 여행을 모바일로 많이 하는데요
작은 화면 때문에 이미지같은것을 자세히 볼수 없을때가 있더라구요

홈페이지나 블로그를 만드신분이 조금만 신경써주면 사용자 입장에서 퀘적한 인터넷을 할텐데 말이죠

위 사진은 원래의 화면일때이고
아래 화면은 크기를 늘린모습입니다

이렇게 모바일 화면일때 크기를 조절할수 있게 하는방법은 너므나 간단합니다

HTML에 코드 하나 넣어주면 되는 간단한 일이죠

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

설명

viewport (뷰포트)
user-scalable=yes (크기 조절허용/허용안함)
initial-scale=1.0 (초기화면 배율 선언)
minimum-scale=1.0 (최소 배율 선언)
maximum-scale=5.0 (최대 배율 선언)

오늘 우리가 배울것은 크기조절을 허용하는것이니 user-scalable=yes 선언해주면 되겠습니다 조절허용안하겠다 하시면 no를 사용하면 되겠죠?

위 메타코드는 반응형 스킨에 사용을합니다

HTML <head> </head> 사이에 메타태그를 위와같이 넣어주시고 적용하시면됩니다