iPhone 6 और 6 प्लस उत्तरदायी ब्रेकप्वाइंट

Question

एप्पल साइट के अनुसार: 1 विपरीत अनुपात (विशिष्ट)

iPhone 6:

iPhone 6 1400 326 ppi पर 1334-दर-750 पिक्सेल संकल्प है + 1300 के साथ 401 पीपीआई पर 1920-बाय-1080-पिक्सेल रिज़ॉल्यूशन है: 1 कंट्रास्ट अनुपात (सामान्य)

हालांकि, सीएसएस मीडिया क्वेरी उत्तरदायी ब्रेकपॉइंट प्रत्येक के लिए क्या होगा? (चित्र और परिदृश्य)

मैं पूरी तरह समझ नहीं पा रहा हूं कि विभिन्न प्रतिक्रियाशील अनुकरणकर्ताओं का उपयोग करके रेटिना स्क्रीन आकारों का परीक्षण कैसे करें। कोई भी सहायताकाफी प्रशंसनीय होगी।

Answer 1

आप सीएसएस device-width आकारों के बजाय डिवाइस के भौतिक पिक्सल का संदर्भ दे रहे हैं। इस tweet के अनुसार, दो के लिए डिवाइस-चौड़ाई हो जाएगा:

iPhone 6: 375px (2.0 DPR) 
iPhone 6 Plus: 414px (2.6 DPR) 

कि यह जानते हुए कि (यह मानते हुए ट्वीट सही है), और उचित meta viewport टैग का उपयोग कर अपने संभालने, आप मोटे तौर पर देख रहे हैं:

iPhone 6: 375px (portrait), 667px (landscape) 
iPhone 6 Plus: 414 (portrait), 736px (landscape) 

आशा है कि इससे मदद मिलती है!

संपादित करें:

वास्तव में 3.0 DPR1.15, जो 2.6 DPR में जो परिणाम द्वारा आकार छोटा iPhone 6 Plus की 2.6 DPR के बारे में, यह है। अधिक जानकारी स्पष्टीकरण के लिए http://www.paintcodeapp.com/news/iphone-6-screens-demystified में पाया जा सकता (लिंक के लिए धन्यवाद @mdcarter!)

Answer 2

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /* iPhone 6 Portrait */ 
} 


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /* iPhone 6 landscape */ 
} 


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    /* iPhone 6+ Portrait */ 
} 


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ landscape */ 
} 

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
    /* iPhone 6 and iPhone 6+ portrait and landscape */ 
} 

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 
    /* iPhone 6 and iPhone 6+ portrait */ 
} 

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 
    /* iPhone 6 and iPhone 6+ landscape */ 
} 

आप सभी मानक उपकरणों here

आम तौर पर