최대 장치 너비 또는 최대 너비를 사용해야합니까?

CSS 미디어 쿼리를 사용 max-device-width하여 장치 너비 (예 : iPhone 또는 Android 장치) 및 / 또는 max-width페이지 너비 를 대상으로하는을 대상으로 지정할 수 있습니다 .

을 사용 max-device-width하면 데스크톱에서 브라우저 창의 크기를 변경할 때 데스크톱 크기가 변경되지 않으므로 CSS가 변경되지 않습니다.

을 사용하는 경우 max-width데스크톱에서 브라우저 창의 크기를 변경할 때 터치하기 쉬운 요소 및 메뉴와 같은 모바일 지향 스타일이 표시 될 수 있습니다.

특정 브라우저 (및 장치?)를 대상으로 지정하는 것은 이제 더 이상 사용되지 않으며 대상에 대해 조금 더 불가지론 적이어야합니다. 미디어 쿼리에도 적용됩니까?

왜 다른 하나를 목표로 삼으시겠습니까? 권장되는 것은 무엇입니까?

다음은 프로덕션 웹 사이트에서 사용하는 미디어 쿼리의 예입니다.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

나는 max-device-width및 max-width.

TL; DR

반응 형 웹 사이트를 만드는 경우 더 넓은 범위의 화면 크기를 대상으로하기 위해 / 대신 미디어 쿼리에서 min-width/ max-width를 사용 하십시오 .min-device-widthmax-device-width

2018 년 미디어 쿼리 레벨 4 사양 초안 에 따르면 device-width미디어 기능은 더 이상 사용되지 않습니다 . 이전 버전과의 호환성을 위해 유지되지만 피해야합니다.

8. 부록 A : 더 이상 사용되지 않는 미디어 기능

뷰포트 (또는 페이지 미디어의 페이지 상자) 크기를 쿼리하려면 사용 가능한 공간에 관계없이 장치의 물리적 크기를 참조하는 , 및 대신 width, height및 aspect-ratio미디어 기능을 사용해야합니다. 배치되는 문서. 미디어 기능은 또한 때때로 모바일 장치를 탐지하기 위해 프록시로 사용됩니다. 대신 작성자는 스타일을 지정하려는 장치의 측면을 더 잘 나타내는 미디어 기능을 사용해야합니다.device-widthdevice-heightdevice-aspect-ratiodevice-*

보조 노트로서, 지정 기억 뷰포트 메타 태그를 에 <head>문서의 섹션 :

<meta name="viewport" content="width=device-width, initial-scale=1">

설명

주어진 장치가 가질 수있는 가능한 모든 화면 해상도와 픽셀 밀도로 인해 픽셀은 픽셀이 아닙니다. 고려해야 할 사항 (확대 / 축소, 픽셀 밀도, 화면 해상도 및 크기, 장치 방향, 종횡비 등)이 있기 때문입니다. ..). 이 경우 픽셀은 실제로 물리적 하드웨어 픽셀이 아니라 "광학 참조 장치"라고 합니다.

다행히도 브라우저 뷰포트의 너비와 배율을 제어하기 위해 문서 섹션 에서 뷰포트 메타 태그 를 지정할 수 있습니다 <head>. 이 태그의 content값이 width=device-width이면 화면의 너비가 기기 독립 픽셀 과 일치하고 모든 다른 기기가 크기를 조정하고 일관되게 작동해야합니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

미디어 쿼리 측면에서는 뷰포트 (현재 브라우저 창) 를 대상으로하는 반면 장치의 실제 전체 화면 크기 / 해상도 를 대상으로하기 때문에 max-width대신 을 사용하는 것이 좋습니다 .max-device-widthmax-widthmax-device-width

즉,을 사용하는 경우 max-device-width데스크톱 브라우저 크기를 조정할 때 적용되는 다른 미디어 쿼리가 표시되지 않습니다.는과 달리 max-width기기의 실제 전체 화면 크기 만 고려되기 때문입니다. 브라우저 창의 현재 크기가 아닙니다.

브라우저 크기를 조정할 때 사이트가 응답하지 않기 때문에 적응 형 레이아웃을 만들려는 경우 큰 차이가 있습니다. 또한, max-device-width더 작은 화면을 가진 장치를 대상으로하는 데 사용 하는 미디어 쿼리를 사용하는 경우 브라우저 창을 더 작은 화면 크기에 맞게 크기를 조정하더라도 데스크톱에 적용되지 않습니다.

2018 년 현재 최신 미디어 쿼리 사양 초안 은 실제로 device-width미디어 기능을 더 이상 사용하지 않으므로 피해야합니다.

또한 Google Developers에 대한 이 기사에서는 다음을 사용하지 않는 것이 좋습니다 max-device-width.

Google Developers-웹 기초-반응 형 CSS 미디어 쿼리

를 기반으로 쿼리를 생성 할 수도 있습니다 *-device-width. 이 관행은 강력히 권장되지 않습니다 .

차이는 미묘하지만 매우 중요합니다. min-width브라우저 창의 크기에 따라 다르지만 min-device-width화면 크기에 따라 달라 집니다. 안타깝게도 기존 Android 브라우저를 포함한 일부 브라우저는 기기 너비를 제대로보고하지 못하고 대신 예상되는 뷰포트 너비 대신 기기 픽셀로 화면 크기를보고 할 수 있습니다.

또한을 사용 *-device-width하면 쿼리가 브라우저 창의 크기가 아닌 실제 장치 크기를 기반으로하므로 창 크기를 조정할 수있는 데스크톱 또는 기타 장치에서 콘텐츠가 조정되지 않을 수 있습니다.

추가 읽기 :

• Quirksmode.org-픽셀은 픽셀이 아니라 픽셀이 아닙니다.
• W3-미디어 쿼리 레벨 4 사양
• Google 개발자-웹 기초-뷰포트
• Google Developers-웹 기초-반응 형 CSS 미디어 쿼리
• MDN-뷰포트 메타 태그를 사용하여 모바일 브라우저에서 레이아웃 제어

장치 너비를 피하십시오. 그 이유는 사용자 브라우저가 어떻게 반응하는지 알 수 없기 때문입니다.

IOS의 경우 최소한 Safari에서는 간단 해 보입니다. 방향에 관계없이 하나의 단일 장치 너비 응답으로 보입니다. 또한 장치 너비는 장치의 짧은면에 대해서만 명시됩니다. iPhone 4S와 iPad에서 이것을 테스트했습니다. 그들은 방향에 관계없이 각각 320과 768에 응답했습니다.

Android의 경우 더 예측할 수 없습니다. Huawei Ascend Y330 (Android 기본 브라우저, Chrome, Opera, Firefox, Firefox Beta, Dolphin)에서 6 개의 브라우저를 테스트했습니다. 응답은 브라우저 유형 및 방향에 따라 다릅니다.

쿼리 (max-device-width : *** px)가있는 페이지에서 테스트하고 쿼리를 실제 상태로 가져 오기 위해 입력해야하는 px- 값을 확인했습니다. 브라우저 유형 및 방향에 따라 4 가지 다른 값 (320, 480, 534, 800)이 필요했습니다. 이로 인해 장치 너비를 사용할 수 없습니다.

최대 너비를 사용하는 경우 데스크톱에서 브라우저 창의 크기를 변경할 때 터치 친화적 인 요소 및 메뉴와 같은 모바일 지향 스타일이 표시 될 수 있습니다.

이것이 바람직하다는 대중의 의견 인 것 같아 충격적입니다. 모바일 이전의 유체 / 액체 디자인이 잘못되었거나 옳은 이유로 나쁜 것으로 간주되었는지 확인하지 못했습니다. 이것은 유동적 레이아웃의 더 멋진 버전이지만 디자이너가 어떤 이유로 수용하고있는 것 같습니다.

2000 년대 중반에 디자인 커뮤니티가 액체보다 고정 된 레이아웃을 선택했을 때, 텍스트 리플 로우가 가독성을 저해하여 종종 과부 및 기타 타이포 그라피 아티팩트를 생성했기 때문입니다. 또한 코드베이스를 유지 관리하는 것은 요소가 충돌하는 것을 방지하기 위해 디자인에서 디자인까지 까다로 웠습니다. 유동적 인 레이아웃과 반응 형 디자인의 유일한 차이점은 더 나은 브라우저와 석조와 같은 프레임 워크의 확산으로 인해 쉽게 수행 할 수 있다는 것입니다.

저는 개인적으로 최소 / 최대 장치 너비를 사용합니다. 수십 년의 우선 순위가있는 데스크톱 문서 규칙을 따르는 것을 선호하기 때문입니다. 인터넷에서 여는 모든 문서가 데스크톱에서 이러한 방식으로 작동하는 것은 아니며 데스크톱에로드되는 다른 유형의 문서 나 응용 프로그램도 마찬가지입니다. MS Word, Photoshop 등과 같이 모바일 지배 이전에 디자인 된 페이지는 스크롤 위치를 유지하고 레이아웃을 변경하지 않으므로 사용자가 관련없는 창 관리 작업을 수행 할 때 페이지 흐름 내에서 콘텐츠를 추적 할 수 있습니다.

저는 일반적으로 3 개의 중단 점을 사용합니다. 하나는 전화 용, 하나는 태블릿 용, 다른 하나는 데스크톱 용입니다. 데스크톱과 종종 최소한 가로 세로는 고정되어 있고 태블릿 세로 및 그 아래는 유동적입니다. 이러한 적응 형 및 반응 형의 조합을 통해 데스크톱이 데스크톱 사이트처럼 동작 할 수있게하면서 필요하지 않게 10 홀 이상의 개별 고정 너비 모바일 장치 레이아웃을 레이아웃 할 수 있습니다. 뷰포트의 크기를 조정할 수 없기 때문에 텍스트가 모바일 장치에서 리플 로우되지 않습니다.