Viewport 지정 시 행동(아이폰) 정보

환경을 확인하다

아이폰4s의 사파리만 확인했다.다음은 모두 이 환경의 결과다.
안드로이드도 마찬가지인가요?

1. Viewport 지정이 없음(문서의 width는 980px 이하)

지정하지 않았을 때 아이폰의viewport 가로 사이즈는 980px입니다.
세로: 가로 스크롤 없음을 표시합니다.
가로: 가로 스크롤 없음을 표시합니다.(세로보다 확대)

2. Viewport 지정이 없음(문서의 width가 980px 이상)

세로: 980px로 확대하여 가로 스크롤 없이 표시합니다.
수평:수직 동작
수직-수평 또는 수평-수직으로 기울어지면 너비 320px로 확대됩니다.

3.width=device-width

세로: 719px로 확대하여 가로 스크롤 없이 표시할 수 있습니다.
가로: 세로로 할 때보다 조금 더 커졌어요.
세로→가로→세로, 최종 너비는 640px이다.
잡기 불가 행위.

4.width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5

세로: 640px로 확대하여 가로 스크롤 없이 표시합니다.
가로: 가로로 스크롤 없이 표시할 수 있도록 960px로 확대합니다.(세로 1.5배)
또 확대율의 MIN, 맥스는 모두 초기 배율과 같기 때문에 확대율이 고정된다.

5.width=400

세로: 가로 스크롤 없이 표시할 수 있도록 400px로 확대합니다.
수평: 400px로 확대하여 가로 스크롤 없이 표시합니다.
width=600(세로로로로로로는width보다넓이), width=1200(총체적으로넓어보인다)도마찬가지다.
내용의 너비를viewport의width와 일치하게 한다.서로 다른 상황에서 상술한 것과 다른 동작을 했다.

총결산

PC 웹사이트에서도 width=<콘텐츠 폭>의viewport를 지정합니다.

스마트폰 사이트를 위한viewport.width device-width 를 지정하여 초기 축척, MAX 축척, MIN 축척을 명시적으로 지정합니다.

설비 종류(PC, 스마트폰, 태블릿PC)별로 뷰를 제작하는 것은 나무랄 데가 없는 것 같다.

사이트 축소판 그림

http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/

http://www.codegrid.net/의'실천! 스마트폰 사이트의viewport 설정'