default width on mobile browser

웹사이트 개발시

모바일은 염두 안 할 수가 없다!!

그런데 viewport라는걸 지정하지 않으면!!

모바일 브라우져는 확대/축소는 있지만 브라우져 윈도우 width값이 없기에 레이아웃을 깨지는 현상을 볼 수 있다.

필자는 width값이 980px로 고정되는 기이한 현상을 경험했는데

이는 모바일 브라우져의 default value viewport가 980px이란다. 적어도 모바일 크롬은 말이다.

viewport를 지정하면 모든 문제는 해결된다.

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

이런식으로 지정을 할 텐데

모바일용 웹이 아닌 상태로 모바일에서 잘보이게 하려면

device-width말고, 직접 컨테이너 최대사이즈를 잘 지정하는것을 권장한다!!

980 width issue는 이것으로 해결!