1. 기본적으로 웹브라우저의 default viewport크기는 800px~1024px이다
(사파리나 크롬은 기본적인 default viewport크기가 980px이다 : 현재 예제에서는 964px)
2. 위의 경우에서 만약 모바일 화면을 작성하는 경우 아래와 같이 표시된다 // 이미지1번 참고
- 실제로 고양이 이미지는 넓이는 300px이다 (첫번째 빨간 사각형)
- 그러나 모바일 화면은 375px을 설정하고있다 (두번째 빨간 사각형)
- 마지막으로 렌더링 되는곳을 보면 실제로 넓이 964px로 모바일화면을 표시하고있다 (세번째 빨간 사각형)
- 즉 현재 모바일 화면에 표시되고있는 고양이 이미지는 PC화면에서 사용중인 웹브라우저의 default viewport 기준(964px)으로 작성되었음을 알수있다
- 화면의 최대 넓이가 375px로 보이지만 실제로는 964px라는것
- 이 경우 모바일화면에서 해당 화면을 확인하기위해선 확대를 해야한다
3. 그러면 여기서 해줘야하는게 viewport를 웹브라우저에서 설정한 default viewport가 아니라
실제 유저가 사용하는 기기의 넓이(viewport)에 맞게 바꿔줄 필요가 있다
4.아래의 태그를 추가함으로써 유저가 사용하는 기기의 viewport를 자동으로 넓이로 사용한다
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5.태그를 추가함으로써 viewport는 iphone6에 맞는 359px가 100%로 설정되고
300px짜리 이미지가 알맞게 표시되는것을 확인할수있다
- width:100% = 각 모바일 기기의 width가 된다
참조