आईपैड प्रो

Question

के लिए सही मीडिया क्वेरी मेरे पास ये दो हैं लेकिन वे काम नहीं कर रहे हैं। मैं क्रोम

/* Landscape*/ 

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {} 

    /* Portrait*/ 
    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {} 

में अनुकरण कर रहा हूँ अगर मैं हटाने 'और (उन्मुखीकरण: परिदृश्य)' तो सीएसएस वहाँ पहले मीडिया क्वेरी में काम करता है में। परिदृश्य और चित्र दोनों के लिए सही अभिविन्यास क्या है?

एचटीएमएल मेटा सेट के रूप में

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 

Answer 1

/* Landscape*/ 

@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {} 

/* Portrait*/ 
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {} 

आईपैड प्रो के लिए पोर्ट्रेट medias क्वेरी ठीक वैसे होना चाहिए। आईपैड प्रो के लिए

लैंडस्केप मीडिया क्वेरी (न्यूनतम-उपकरण-चौड़ाई) होना चाहिए 1366px और (अधिकतम उपकरण-चौड़ाई) 1024px गुणा होना चाहिए।

उम्मीद है कि इससे मदद मिलती है।

Answer 2

/* ----------- iPad Pro ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (-webkit-min-device-pixel-ratio: 1.5) { 
} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1.5) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1.5) { 

} 

मेरे पास आईपैड प्रो नहीं है लेकिन यह क्रोम सिम्युलेटर में मेरे लिए काम करता है।

Answer 3

यह मेरे लिए काम किया

/* Portrait */ 
@media only screen 
    and (min-device-width: 834px) 
    and (max-device-width: 834px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Landscape */ 
@media only screen 
    and (min-width: 1112px) 
    and (max-width: 1112px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) 
{ 

}