모바일 웹의 최대 장치 너비와 최대 너비의 차이점은 무엇입니까?

나는 아이폰 / 안드로이드 폰에 대한 몇 가지 HTML 페이지를 개발해야하지만 차이 무엇 max-device-width과 max-width? 다른 화면 크기에 다른 CSS를 사용해야합니다.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

차이점이 뭐야?

max-width 대상 표시 영역의 너비입니다 (예 : 브라우저)

max-device-width 장치 전체 렌더링 영역의 너비, 즉 실제 장치 화면

동일은 간다 max-height와 max-device-height자연스럽게.

max-width는 뷰포트의 너비를 나타내며와 함께 특정 크기 또는 방향을 타겟팅하는 데 사용할 수 있습니다 max-height. 여러 조건 max-width(또는 min-width)을 사용 하면 브라우저 크기가 조정되거나 iPhone과 같은 장치에서 방향이 변경 될 때 페이지 스타일을 변경할 수 있습니다.

max-device-width방향, 현재 배율 또는 크기 조정에 관계없이 장치의 뷰포트 크기를 나타냅니다. 이것은 장치에서 변경되지 않으므로 화면이 회전하거나 크기가 조정될 때 스타일 시트 또는 CSS 지시문을 전환하는 데 사용할 수 없습니다.

이 스타일 사용에 대해 어떻게 생각하십니까?

주로 "모바일 장치"에 사용되는 모든 중단 점 min(max)-device-width과 "데스크톱"에 주로 사용 되는 중단 점에 대해 min(max)-width.

너비를 잘못 계산하는 "모바일 장치"가 많이 있습니다.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml 을 보십시오 .

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

max-device-width는 장치 렌더링 너비입니다.

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

최대 너비는 대상 표시 영역의 너비이며 현재 브라우저 크기입니다.

차이점은 max-device-width는 모든 화면의 너비이며 max-width는 브라우저가 페이지를 표시하는 데 사용하는 공간을 의미합니다. 그러나 또 다른 중요한 차이점은 안드로이드 브라우저의 지원입니다. 실제로 최대 장치 너비를 사용하려는 경우 Opera에서만 작동하지만 대신 모든 종류의 모바일 브라우저에서 최대 너비가 작동한다고 확신합니다 ( Chrome, firefox 및 ANDROID의 오페라에서 테스트했습니다).

최대 너비 는 대상 디스플레이 영역의 너비입니다 (예 : 브라우저). max-device-width 는 장치 전체 렌더링 영역의 너비, 즉 실제 장치 화면입니다.

• max-device-width를 사용하는 경우 데스크톱에서 브라우저 창의 크기를 변경하면 CSS 스타일이 다른 미디어 쿼리 설정으로 변경되지 않습니다.

• max-width를 사용하는 경우 데스크톱에서 브라우저의 크기를 변경하면 CSS가 다른 미디어 쿼리 설정으로 변경되고 터치 메뉴와 같은 모바일 스타일이 표시 될 수 있습니다.

크로스 플랫폼 앱을 만드는 경우 (예 : phonegap / cordova 사용)

장치 너비 또는 장치 높이를 사용하지 마십시오. Android 기기는 기기 너비 또는 기기 높이에 문제가 있으므로 CSS 미디어 쿼리에서 너비 또는 높이를 사용하십시오. iOS의 경우 잘 작동합니다. Android 기기 만 기기 너비 / 기기 높이를 지원하지 않습니다.

더 이상 장치 너비 / 높이를 사용하지 마십시오.

장치 너비, 장치 높이 및 장치 가로 세로 비율은 미디어 쿼리 수준 4에서 더 이상 사용되지 않습니다. https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

방향 및 (최소 / 최대) 해상도와 함께 너비 / 높이 (최소 / 최대 제외)를 사용하여 특정 장치를 대상으로합니다. 모바일 너비 / 높이는 장치 너비 / 높이와 같아야합니다.