iPhone X / 8 / 8 Plus CSS 미디어 쿼리

iPhone X / 8 / 8 Plus CSS 미디어 쿼리

---

Apple의 새 장치에 해당하는 CSS 미디어 쿼리는 무엇입니까? X의 안전 영역 배경색을 변경 하려면 body's 를 설정해야합니다 background-color.

---

아이폰 X

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

---

아이폰 8

@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }

---

아이폰 8 플러스

@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone 6 + / 6s + / 7 + / 8 +는 동일한 크기를 공유하지만 iPhone 7/8도 공유합니다.

---

특정 방향을 찾고 계십니까?

초상화

다음 규칙을 추가하십시오.

    and (orientation : portrait) 

경치

다음 규칙을 추가하십시오.

    and (orientation : landscape) 

참조 :

• https://webkit.org/blog/7929/designing-websites-for-iphone-x/
• https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
• https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
• https://mydevice.io/devices/
• http://viewportsizes.com/mine/

---

다음은 iPhone에 대한 다음 미디어 쿼리 중 일부입니다. 다음은 참조 링크입니다 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

    /* iphone 3 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

    /* iphone 4 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 5 */
    @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 6, 6s, 7, 8 */
    @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

    /* iphone 6+, 6s+, 7+, 8+ */
    @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

    /* iphone X */
    @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

    /* iphone XR */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }

   /* iphone XS */
    @media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

   /* iphone XS Max */
    @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }

---

여기에 대한 답변이 사용하고있는 것으로 나타났습니다 : device-width, device-height, min-device-width, min-device-height, max-device-width, max-device-height.

더 이상 사용되지 않으므로 사용하지 마십시오 . 참조를 위해 MDN을 참조하십시오 . 대신 일반을 사용 min-width, max-width등등합니다. 추가 보장을 위해 최소 및 최대를 동일한 px 양으로 설정할 수 있습니다. 예를 들면 :

아이폰 X

@media only screen 
    and (width : 375px) 
    and (height : 635px)
    and (orientation : portrait)  
    and (-webkit-device-pixel-ratio : 3) { }

높이에 635px를 사용하고 있음을 알 수 있습니다. 창 높이는 실제로 635px입니다. iPhone X 용 iOS 시뮬레이터를 실행하고 Safari Web inspector에서 window.innerHeight. 이 주제에 대한 몇 가지 유용한 링크는 다음과 같습니다.

• https://medium.com/@hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://ivomynttinen.com/blog/ios-design-guidelines
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

---

It seems that the most accurate (and seamless) method of adding the padding for iPhone X/8 using env()...

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Here's a link describing this:

https://css-tricks.com/the-notch-and-css/

---

If your page is missing meta[@name="viewport"] element within its DOM, then the following could be used to detect a mobile device:

@media only screen and (width: 980px), (hover: none) { … }

If you want to avoid false-positives with desktops that just magically have their viewport set to 980px like all the mobile browsers do, then a device-width test could also be added into the mix:

@media only screen and (max-device-width: 800px) and (width: 980px), (hover: none) { … }

Per the list at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries, the new hover property would appear to be the final new way to detect that you've got yourself a mobile device that doesn't really do proper hover; it's only been introduced in 2018 with Firefox 64 (2018), although it's been supported since 2016 with Android Chrome 50 (2016), or even since 2014 with Chrome 38 (2014):

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

참고URL : https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries