css
메타태그의 width=device-width에 대해서
- 기본적으로 웹브라우저의 default viewport크기는 800px~1024px이다
(사파리나 크롬은 기본적인 default viewport크기가 980px이다 : 현재 예제에서는 964px)
- 위의 경우에서 만약 모바일 화면을 작성하는 경우 아래와 같이 표시된다 // 이미지1번 참고
-
실제로 고양이 이미지는 넓이는 300px이다 (첫번째 빨간 사각형)
-
그러나 모바일 화면은 375px을 설정하고있다 (두번째 빨간 사각형)
-
마지막으로 렌더링 되는곳을 보면 실제로 넓이 964px로 모바일화면을 표시하고있다 (세번째 빨간 사각형)
-
즉 현재 모바일 화면에 표시되고있는 고양이 이미지는 PC화면에서 사용중인 웹브라우저의 default viewport 기준(964px)으로 작성되었음을 알수있다
-
화면의 최대 넓이가 375px로 보이지만 실제로는 964px라는것
-
이 경우 모바일화면에서 해당 화면을 확인하기위해선 확대를 해야한다
- 그러면 여기서 해줘야하는게 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가 된다
참조