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

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

아이폰/안드로이드 폰용 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-widthiPhone과 같은 장치에서 브라우저의 크기가 조정되거나 방향이 변경될 때 페이지 스타일을 변경할 수 있습니다.

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 및 Opera for Android에서 테스트했습니다).

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

만약 당신이 max-device-width를 사용하고 있다면, 당신의 바탕 화면에서 브라우저 창의 크기를 변경할 때, CSS 스타일은 다른 미디어 쿼리 설정으로 변경되지 않을 것입니다.

최대 너비를 사용하는 경우 바탕 화면에서 브라우저 크기를 변경하면 CSS가 다른 미디어 쿼리 설정으로 변경되고 터치하기 쉬운 메뉴와 같은 모바일에 대한 스타일링이 표시될 수 있습니다.

크로스 플랫폼 앱(예: 폰갭/코드바 사용)을 만들고 있다면,

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

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

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

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

언급URL : https://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web