आईफोन एक्स/8/8 प्लस सीएसएस मीडिया प्रश्न

Question

ऐप्पल के नए उपकरणों से संबंधित सीएसएस मीडिया प्रश्न क्या हैं? एक्स के सुरक्षित क्षेत्र पृष्ठभूमि रंग को बदलने के लिए मुझे body के background-color सेट करने की आवश्यकता है।

Answer 1

iPhone एक्स

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

---

iPhone 8

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

---

iPhone 8 प्लस

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

आईफोन 6 +/6 एस +/7 +/8 + एक ही आकार साझा करते हैं, जबकि आईफोन 7/8 भी करता है।

---

एक विशिष्ट अभिविन्यास की तलाश में है?

पोर्ट्रेट

निम्नलिखित नियम जोड़ें:

and (orientation : landscape) 

:

and (orientation : portrait) 

लैंडस्केप

निम्नलिखित नियम जोड़ें

संदर्भ:

• 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/

Answer 2

आईफ़ोन के लिए निम्न में से कुछ मीडिया प्रश्न हैं। रेफरी लिंक https://mydevice.io/devices/

/* 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 */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { } 

/* iphone 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) { }