모바일 화면

조회수 346회

모바일에서 확인되는 화면을 측정하고 싶습니다.

무슨 말이냐면.. 같은 페이지라고 하더라도, 어떤 페이지는 데스크탑에서는 정상적으로 보이지만, 모바일에서는 좌우가 잘리는 경우가 있는데요.

이렇게 좌우가 잘리는 경우를 측정하고 싶습니다.

어디선가 본 글로는 모바일에서는 좌우 너비가 일정 크기로 고정된다고 하는데.. 이게 실제로 맞는건가 싶어서 측정을 시도해봤는데 모바일 기기로 접속하더라도 실제 좌우 너비는 일정하지 않고 전부 다르더라구요.

해상도가 다른 기기로 접속할 경우 그것에 맞는 최적의 크기로 css를 구성하고 싶은데, 그 기준이 되는 너비를 정하려고 합니다.

.

다음 명령어로 열린 화면의 좌우 너비를 측정했는데, 모바일 기기마다 그 너비가 달랐습니다.

혹시 위 내용과 관련하여 제가 잘못 짚고 있는 부분을 지적해주실 수 있을까요??

window.innerWidth

1 답변

  • 좋아요

    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 프레임워크를 알아보세요.

    모바일에서 확인되는 화면을 측정하고 싶습니다. (...) 이렇게 좌우가 잘리는 경우를 측정하고 싶습니다.

    이거는 그냥 작업하시는 컴퓨터에서 브라우저 창 크기를 조절해 가면서 확인하시면 됩니다. 적응형이 아닌 이상은 그 정도 에뮬레이션으로도 충분합니다. 그 브라우저의 개발자 도구를 통해서 모바일 기기 에뮬레이션을 실제로 수행하셔도 되긴 합니다만.

    혹시 위 내용과 관련하여 제가 잘못 짚고 있는 부분을 지적해주실 수 있을까요??

    특별히 없는 거 같아용~

    • 기본 템플릿을 만드는건 간단했는데 세부 조정이 어렵네요. 해상도에 따라 폰트 크기부터 이미지나 표까지 신경을 써줘야 하니.. ㅠㅠ 초보자 2022.5.23 11:49
    • 고생이 많으시네요 ㅋㅋ 표가 진짜 골때립니다 다른 CSS 프레임워크들 최대한 컨닝하세요 엽토군 2022.5.23 17:01
    • 꾸미는 건 그렇게 신경 쓰지 않는데 모바일에서는 이상하게 나와서 문제네요 ^^;; 표를 자르자니 몇개씩 잘라다 써야할지도 문제에요. ㅠㅠ 초보자 2022.5.23 17:15

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)