सीएसएस मीडिया क्वेरी केवल आईपैड और आईपैड को लक्षित करने के लिए?

हाय मैं कई टैबलेट डिवाइस, आईपैड, गैलेक्सी टैब, एसर आइकोनिया, एलजी 3 डी पैड आदि के साथ काम कर रहा हूं।सीएसएस मीडिया क्वेरी केवल आईपैड और आईपैड को लक्षित करने के लिए?

आईपैड - 1024 x 768
एलजी पैड - 1280 x 768
गैलेक्सी टैब - 1280 x 800

मैं केवल CSS3 के मीडिया क्वेरी का उपयोग आईपैड लक्षित करना चाहते हैं। चूंकि, एलजी और आईपैड की डिवाइस चौड़ाई 768 पीएक्स है - मुझे प्रत्येक डिवाइस को अलग करने में परेशानी हो रही है।

मैं अलग करने के लिए निम्नलिखित की कोशिश की है, लेकिन काम नहीं लगता है:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ 
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */ 
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */

मैं करने के लिए -webkit-डिवाइस पिक्सेल-अनुपात और अन्य -webkit * विकल्प और उनके मूल्यों को पता नहीं है आईपैड के लिए लक्ष्य। मैं शैलियों, किसी भी विचार के लिए जावास्क्रिप्ट का उपयोग नहीं करना चाहता हूँ?

स्रोत

2011-11-25 Hossain Khan

डिवाइस-पहलू-अनुपात के लिए काम किया आईपैड पर काम करेंगे है, लेकिन उपयोग करने के लिए सही मान 768/1024 –

108

अंत में से एक समाधान पाया: Detect different device platforms using CSS

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> 
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

HTTP कॉल को कम करने के लिए, यह भी आप के अंदर मौजूदा आम सीएसएस फ़ाइल का उपयोग किया जा सकता है:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { 
    .ipad-portrait { color: red; } /* your css rules for ipad portrait */ 
} 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { 
    .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ 
}

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

अन्य संदर्भ:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

स्रोत

2012-02-29 18:25:17

बस अगर आप सोच रहे थे, तो यह जावास्क्रिप्ट का उपयोग करने के बिना डिवाइस घुमाए जाने पर शैलियों को बदल देगा। –

सभी आईपैड के पास एक ही संकल्प है? मैंने सोचा कि विभिन्न संस्करणों के लिए 3 संकल्प थे। और मुझे लगता है कि भविष्यवाणी करना असंभव है कि अधिक संकल्प सामने आएंगे या नहीं। – Dan

दिनों में वापस, जब मैं उस पर काम कर रहा था, वहां कोई आईपैड मिनी नहीं था। इसलिए, मुझे नहीं पता कि स्क्रीन रिज़ॉल्यूशन के रूप में यह रिपोर्ट करता है। लेकिन, यह सीएसएस मीडिया क्वेरी रेटिना आईपैड के लिए काम किया। इसलिए, अधिक सुनिश्चित होने के लिए वास्तविक उपकरणों पर परीक्षण करना बेहतर है। –

खैर काफी वही सवाल और वहाँ भी एक जवाब है =)

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

@media only screen and (device-width: 768px) ... 
@media only screen and (max-device-width: 1024px) ...

मैं परीक्षण नहीं कर सकते यह वर्तमान में तो यह परीक्षण कृपया =)

इसके अलावा कुछ और नहीं मिला:

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

या आप नेविगेटर को कुछ जावास्क्रिप्ट के साथ जांचें और जावास्क्रिप्ट

स्रोत

2011-11-25 16:12:37

के साथ एक सीएसएस फ़ाइल जेनरेट/जोड़ें/आपको कुछ स्क्रिप्ट का उपयोग करके डिवाइस को अपने उपयोगकर्ता एजेंट द्वारा लक्षित करने की आवश्यकता है। आईपैड के लिए उपयोगकर्ता एजेंट है:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

स्रोत

2011-11-25 17:43:06

है सर्वर पर पता लगा रहा कुछ फायदे हैं। एक बार सर्वर पर पता चला, मैं सीएसएस चयन में सहायता के लिए प्रतिक्रिया के शरीर में एक वर्ग जोड़ दूंगा। – Oren

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

@ FilipDalüge यह सबसे अच्छा जवाब के करीब कहीं नहीं है। जब तक आप सीएसएस स्पेसिंग समस्याओं को ठीक करने के लिए मीडिया प्रश्नों का उपयोग कर रहे हैं, इससे कोई फर्क नहीं पड़ता कि यह भविष्य का सबूत है या यदि यह समान स्क्रीन आकार के साथ अन्य उपकरणों पर आग लगती है। उपर्युक्त उत्तर मोबाइल सफारी का * सटीक * संस्करण लक्षित करता है जो मूल रूप से बेकार है, क्योंकि यह एक ही पीढ़ी में सभी आईपैड डिवाइसों को भी संभाल नहीं पाएगा। –

<html> 
<head> 
    <title>orientation and device detection in css3</title> 

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" /> 
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> 
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" /> 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" /> 
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" /> 

</head> 
<body> 
    <div id="iphonelandscape">iphone landscape</div> 
    <div id="iphoneportrait">iphone portrait</div> 
    <div id="ipadlandscape">ipad landscape</div> 
    <div id="ipadportrait">ipad portrait</div> 
    <div id="htcdesirelandscape">htc desire landscape</div> 
    <div id="htcdesireportrait">htc desire portrait</div> 
    <div id="desktop">desktop</div> 
    <script type="text/javascript"> 
     function res() { document.write(screen.width + ', ' + screen.height); } 
     res(); 
    </script> 
</body> 
</html>

स्रोत

2014-12-18 09:31:19

मैं थोड़ा इस जवाब देने के लिए देर हो चुकी हूँ, लेकिन इनमे से कोई भी मेरे लिए काम किया।

यह वही मुझे

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    //your styles here 
    }

स्रोत

2015-06-11 09:13:49 Baig

धन्यवाद, लेकिन जब परिदृश्य और चित्र मोड के बीच बदल रहा है तो यह मेरे लिए गन्दा हो गया। इसलिए मुझे 'और (अभिविन्यास: चित्र)' और 'और (अभिविन्यास: परिदृश्य) 'जोड़ना पड़ा ताकि सीएसएस संघर्ष न करे। तो किसी भी व्यक्ति के लिए जो मुझे समझ में नहीं आया, कुल मीडिया क्वेरी इस तरह पोर्ट्रेट के लिए दिखाई दे रही थी: '@media सब और (डिवाइस-चौड़ाई: 768 पीएक्स) और (डिवाइस-ऊंचाई: 1024 पीएक्स) और (अभिविन्यास: चित्र) { // शैली } ' – Coco

सीएसएस मीडिया क्वेरी केवल आईपैड और आईपैड को लक्षित करने के लिए?

उत्तर

संबंधित मुद्दे