मिनी-चौड़ाई मीडिया क्वेरी आईपैड पर काम नहीं कर रही है?

Question

लैंडस्केप मोड में आईपैड पर निम्न मीडिया क्वेरी क्यों नहीं उठाई जा रही है?

@media all and (min-device-width: 1000px) { 
    css here 
} 

या

@media all and (min-width: 1000px) { 
    css here 
} 

मैं इस सीएसएस किसी भी ब्राउज़र जो 1000px विस्तृत या खत्म हो गया है लक्षित करना चाहते हैं, बस iPads नहीं। इस कारण आईडी संभवतः न्यूनतम-चौड़ाई के दूसरे विकल्प के साथ काम करता है, यदि संभव हो तो न्यूनतम डिवाइस-चौड़ाई नहीं। दोनों संस्करण मेरे पीसी पर फ़ायरफ़ॉक्स के साथ ठीक काम करते हैं। धन्यवाद

Answer 1

आईपैड हमेशा की तरह, 768px के रूप में इसकी चौड़ाई और 1024px गुणा के रूप में अपनी ऊंचाई की रिपोर्ट है, तो आप इसे कैसे orientation साथ घुमाया जाता है पता लगाना और इतने तरह min-device-height:1000px उपयोग करने के लिए:

 /* This will apply to all screens with a width 999px and smaller */ 
* { 
    color:green; 
    background-color:black; 
} 

    /* 
     This will apply to all screens larger then 1000px wide 
     including landscape ipad but not portrait ipad. 
     */ 
@media (orientation:landscape) and (min-device-height:1000px), 
     all and (min-width:1000px) { 
    * { 
     color:white; 
     background-color:red; 
    } 
} 

परिणाम:

• आईपैड
  • पोर्ट्रेट           - हरी पाठ - काला पृष्ठभूमि
  • लैंडस्केप - सफेद पाठ     - लाल पृष्ठभूमि
• iPhone
  • पोर्ट्रेट           - हरी पाठ - काला पृष्ठभूमि
  • लैंडस्केप - हरी पाठ - काला पृष्ठभूमि
• कंप्यूटर (संकल्प)
  • 1680x1050 - सफेद पाठ   - लाल पृष्ठभूमि
  • 800x600           - हरी पाठ - काला

पृष्ठभूमि किसी भी अब और IE का उपयोग करता है क्रोम & फ़ायरफ़ॉक्स (ले रहे हैं?)

संदर्भ:
w3 media queries
Safari CSS Reference
Optimizing Web Content

Answer 2

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

/* iPad [portrait + landscape] */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    .selector-01 { margin: 10px; } 
    .selector-02 { margin: 10px; } 
    .selector-03 { margin: 10px; } 
} 

यह screen विशेषता की तरह लग रहा से आवश्यक हो सकता है।

Answer 3

पाया इस नए आईपैड

@media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) { 
    * { 
     color:white; 
     background-color:red; 
    } 
} 

Answer 4

रिकॉर्ड के लिए के लिए महान काम करता है, मुझे यकीन है कि नहीं कर रहा हूँ क्यों

@media (min-width: 1000px) { 

/* css here */ 

} 

आपके लिए काम नहीं किया है। संभवतः आईपैड के साथ कुछ बदल गया क्योंकि इस सवाल को पहले पोस्ट किया गया था?

यहाँ एक काम कर उदाहरण है:
लाइव दृश्य: http://fiddle.jshell.net/panchroma/Bn4ah/show/
संपादित दृश्य: http://fiddle.jshell.net/panchroma/Bn4ah/

भी सुनिश्चित हो अपने पृष्ठ के सिर में शामिल करने के लिए

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

।

Answer 5

मैं इस तरह एक साधारण मीडिया क्वेरी का उपयोग करने की कोशिश कर रहा था: @media केवल स्क्रीन और (न्यूनतम-चौड़ाई: 768px) {सीएसएस यहाँ} लेकिन मैं एक iPad समर्थक 10.5 परीक्षण 'मैं था पर ट्रिगर नहीं करेगी पर, मैं इसे 900px (चित्र के लिए) में बढ़ाता हूं और यह ठीक काम करता है, मुझे लगता है कि रेटिना डिस्प्ले की वजह से आपको क्षतिपूर्ति करने की आवश्यकता है, यह पुराने आईपैड गैर-रेटिना पर ठीक काम कर सकता है।