모바일 화면
조회수 346회
모바일에서 확인되는 화면을 측정하고 싶습니다.
무슨 말이냐면.. 같은 페이지라고 하더라도, 어떤 페이지는 데스크탑에서는 정상적으로 보이지만, 모바일에서는 좌우가 잘리는 경우가 있는데요.
이렇게 좌우가 잘리는 경우를 측정하고 싶습니다.
어디선가 본 글로는 모바일에서는 좌우 너비가 일정 크기로 고정된다고 하는데.. 이게 실제로 맞는건가 싶어서 측정을 시도해봤는데 모바일 기기로 접속하더라도 실제 좌우 너비는 일정하지 않고 전부 다르더라구요.
해상도가 다른 기기로 접속할 경우 그것에 맞는 최적의 크기로 css를 구성하고 싶은데, 그 기준이 되는 너비를 정하려고 합니다.
.
다음 명령어로 열린 화면의 좌우 너비를 측정했는데, 모바일 기기마다 그 너비가 달랐습니다.
혹시 위 내용과 관련하여 제가 잘못 짚고 있는 부분을 지적해주실 수 있을까요??
window.innerWidth
1 답변
-
모바일 기기마다 그 너비가 달랐습니다.
너무나 당연한 겁니다. 아이폰이 각 세대에 따라서, Pro/SE 여부에 따라서 화면 크기, 해상도, 사용 불가 영역이 다 다르다는 건 공공연한 비밀이죠. 애초에 지금 당면해 계신 것은 뷰포트 문제에요. 모질라 문서에서는 이 문제를 가리켜 "픽셀은 픽셀이 아니다"라고 표현합니다. 한번 읽어보세요.
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
해상도가 다른 기기로 접속할 경우 그것에 맞는 최적의 크기로 css를 구성하고 싶은데
위 링크된 글을 보시면 이런 메타태그가 나옵니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
일단 이걸 넣어서 모든 기기에서의 픽셀 배율을 고정합시다. 그래야 기기 너비별 최적화를 수월하게 진행하실 수 있을 거에요.
그 기준이 되는 너비를 정하려고 합니다.
여기가 까다로운 부분인데요 대체로 화면너비가 768px 미만인 것을 모바일 기기로 간주합니다. 그 다음은 태블릿 기기, 그 다음은 노트북... 하는 식이에요. media query breakpoints로 찾아서 베스트 프랙티스를 따라하시거나 Bootstrap 같은 CSS 프레임워크를 알아보세요.
모바일에서 확인되는 화면을 측정하고 싶습니다. (...) 이렇게 좌우가 잘리는 경우를 측정하고 싶습니다.
이거는 그냥 작업하시는 컴퓨터에서 브라우저 창 크기를 조절해 가면서 확인하시면 됩니다. 적응형이 아닌 이상은 그 정도 에뮬레이션으로도 충분합니다. 그 브라우저의 개발자 도구를 통해서 모바일 기기 에뮬레이션을 실제로 수행하셔도 되긴 합니다만.
혹시 위 내용과 관련하여 제가 잘못 짚고 있는 부분을 지적해주실 수 있을까요??
특별히 없는 거 같아용~
댓글 입력