टैबलेट न्यूनतम-रिज़ॉल्यूशन और अधिकतम-रिज़ॉल्यूशन

Question

के लिए मीडिया प्रश्न वर्तमान में एक उत्तरदायी डिज़ाइन वेबसाइट पर काम कर रहे हैं। मैं चौड़ाई और स्क्रीन रिज़ॉल्यूशन के आधार पर विभिन्न उपकरणों को लक्षित करने के लिए मीडिया क्वेरी का उपयोग करता हूं।

1. मेरे पास एक परिदृश्य है कि मैं डिवाइस को लक्षित करने के लिए स्क्रीन रिज़ॉल्यूशन का उपयोग करना चाहता था, लेकिन मुझे नहीं पता कि यह कैसे काम करता है।

2. मैं न्यूनतम चौड़ाई और अधिकतम चौड़ाई दोनों की जांच करना चाहता था, जिसके साथ स्क्रीन रेज़ोल्यूशन 97 डीपीआई से आईपैड अधिकतम रिज़ॉल्यूशन 264 डीपीआई तक भी हो सकता है। लेकिन यह काम नहीं लगता है। अगर मैं एक संकल्प न्यूनतम चौड़ाई देता हूं: एचपी लोड किए गए टैबलेट के लिए 155 डीपीआई यह काम करता है। लेकिन अधिकतम रिज़ॉल्यूशन की स्थिति में न्यूनतम काम नहीं कर रहा है। क्या आप लोग अपना विचार साझा कर सकते हैं।

इसके लिए मैं नीचे दिए गए कोड

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

Answer 1

resolution मीडिया क्वेरी doesn't have good support in webkit browsers yet की तरह इस्तेमाल किया है ताकि आप अधिक बजाय device-pixel-ratio का उपयोग कर सफलता हो सकती है।

http://bjango.com/articles/min-device-pixel-ratio/

तो हम सब बातों वेबकिट (क्रोम, सफारी, iOS और Android) के लिए उन ब्राउज़रों कि यह समझ में (फ़ायरफ़ॉक्स, IE9 +, ओपेरा) के लिए resolution, और device-pixel-ratio का उपयोग कर अपने मीडिया क्वेरी को फिर से कर सकते हैं:

@media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px), 
     only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {} 

Answer 2

ये MQS windows8.1 सिम्युलेटर में पूर्व निर्धारित सेटिंग्स संभाल लेंगे:

@media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768), 
    screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768), 
    screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080), 
    screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: red !important; 
    } 
} 

@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) { 
    body { 
    background-color: violet !important; 
    } 
} 

@media screen and (max-resolution: 174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: purple !important; 
    } 
} 

Answer 3

एसी तथापि http://quirksmode.org/tablets.html

@media screen and (min-width: 37em) { 
} 

Quircksmode द्वारा बड़े माप के मुताबिक, इस नए गोलियाँ मुझे लगता है के लिए सबसे अच्छा काम नहीं करता है मेरे फोन 37em या उससे अधिक है के बाद से।

के बारे में क्या:

@media screen and (min-width: 42em) { 
}