기기에 따라 뷰포트가 다른 걸 어떻게 해야할까?

오랜만에 쓰는 블로그 글

2022.1월 웹디자인 스터디 중이다.

 

반응형 적응형이 아닌 아직 초기단계이므로 데스크탑(PC)전용으로 제작하고 있다.

짧은 시간에 코딩도 해야해서 페이지도 많게 나오지 않도록 했다.

 

웹디자인은 위처럼 많은 페이지를 만들지 않고 마무리하였고, 이제 코딩을 하는데 처음부터 난관에 봉착했다.

PC는 당연히 1920*1080일거라는 생각으로 웹페이지 크기를 1920*1080으로 만들었는데 코딩을 하면서 웹브라우저의 크기를 재보니 내 기기에서는 넘쳐흐르는 크기였다. 왜지??

pc는 다 1920..아닌가?

 

그래서 rectangle을 만들어서 width를 조정해가며 크기를 맞춰보았다.

웬걸. 1440정도였다. 브라우저가 크롬이어서 위의 헤더나, 우측의 스크롤 범위를 고려하더라도 1920*1080은 절대 될 수없었다. 왠지 피그마에 데스크탑 사이즈가 1440이더니, 이때문이었다.

 

왜그런가 했더니?

이는 뷰포트의 크기문제였다.

기기는 전부 가지고 있는 뷰포트가 디바이스에 따라 다르다. 내가 가지고 있는 노트북의 크기는 1440px정도였던 것이다.

그러니 1920사이즈를 넣으면 화면보다 넘치므로 하단의 스크롤이 생기는 것.

만약 내가 내 뷰포트에 딱 맞추어 제작한다 하더라도 기기마다 접속을 하면 또 뷰포트의 크기가 다른 것들이 있을 것 이기 때문에 이를 해결해야했다.

 

이 문제를 해결할 방법은?

구글링 중 이 분의 티스토리에서 발견했다.

https://offbyone.tistory.com/110

반응형 웹 - 뷰포트(viewport) 사용법