गैलेक्सी एस 3

Question

के लिए सीएसएस मीडिया प्रश्न कोई भी मीडिया प्रश्नों के साथ सैमसंग गैलेक्सी एस 3 को लक्षित करने का तरीका जानता है?

वर्तमान में मैं का उपयोग करें:

आईपैड

<link rel="stylesheet" media="all and (device-width: 768px)"            href="css/device-768.css"/> 

अन्य टैबलेट उपकरणों

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/> 

फ़ोनों (S3 फ्लॉप उपयोग इस - नहीं पता क्यों)

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)" href="css/phones.css"/> 

मैं भी परीक्षण

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="css/phones.css"/> 

लेकिन यह फ्लॉप काम ...

Answer 1

मैं उस पृष्ठ दिखाता है कि किसी भी उपकरण मीडिया सुविधाओं के मूल्यों देकर मीडिया के प्रश्नों पर प्रतिक्रिया होगी की स्थापना की है। ,

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

वहां से आप तय कर सकते हैं जो मीडिया क्वेरी आप क्या विभिन्न उपकरणों रिपोर्ट के आधार पर उपयोग करना चाहते हैं: बस परीक्षण करने के लिए आप चाहते हैं डिवाइस के साथ पृष्ठ पर जाएं। याद रखें कि विशिष्ट उपकरणों को लक्षित करना आम तौर पर एक बुरा विचार है। अपनी वेबसाइट को सतह पर अनुकूलित करने के लिए आपको प्रदर्शन आकार और घनत्व को लक्षित करना चाहिए।

Answer 2

जैसा पहले उल्लेख किया गया है। अपने हैंडसेट पर इस Media Query detector का उपयोग करें और बेहतर तरल पदार्थ डिज़ाइन का उपयोग करने पर भी विचार करें - सीएसएस हैक्स अच्छे नहीं हैं - यदि आपके पास अच्छा तरल पदार्थ डिज़ाइन है तो आपको 90% परिदृश्यों में वास्तव में उनकी आवश्यकता नहीं होनी चाहिए।

सैमसंग गैलेक्सी एस 3

@media only screen and (max-device-width: 720px) and (orientation:portrait) { 
    .your-css{} 
} 

@media only screen and (max-device-width: 1280px) and (orientation:landscape) { 
    .your-css{} 
} 

Answer 3

मैं इस प्रयोग किया जाता S3 पर सिर्फ पोर्ट्रेट दृश्य को लक्षित करने के:

@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) { 

} 

Answer 4

मुझे लगता है कि यह सुरक्षित रूप से आज (HTCs, iPhone का सबसे फोन पर लागू होगा, सैमसंग), सामान्य टैबलेट चौड़ाई से बचते समय (आईपैड आईपैड 3/4 आईओएस 6 में 672px चित्र पर) है।

सैमसंग नेक्सस एस एंड्रॉयड 2.3.6 स्टॉक ब्राउज़र जो चौड़ाई: 480px गुणित, ऊंचाई: 800px (अधिकतम-चौड़ाई 800)

<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/> 

यह फोन अजीब मछली होगा

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

संदर्भ: http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Answer 5

Samsung Galaxy S मैं & द्वितीय: 320 x 533, पोर्ट्रेट मोड में (सीएसएस पिक्सेल घनत्व 1 है।5)

Samsung Galaxy S III: 360 x 640, पोर्ट्रेट मोड में

Answer 6

सब इस "अधिकतम-उपकरण-चौड़ाई" "न्यूनतम-ऊंचाई", आदि, नीमहकीमी भूल जाओ समस्या तुम लोग कर रहे हैं! डिवाइस के आयामों के लिए डिजाइन नहीं। इसके अलावा, सैमसंग के अनुसार गैलेक्सी एस 3 में 2 की पिक्सेल घनत्व है, जिसका अर्थ है कि भौतिक स्क्रीन 1 डिवाइस पिक्सेल से 2 सीएसएस पिक्सल तक मैप करती है। यदि यह सत्य है तो 720x1280 संकल्प केवल एक तार्किक संकल्प है और डिवाइस का वास्तविक भौतिक संकल्प नहीं है! यह ऐप्पल आईफोन 4 के मामले में भी है, जिसमें 640x960px का एक निश्चित संकल्प है, जो वास्तव में तार्किक संकल्प है और वास्तविक डिवाइस का वास्तविक संकल्प नहीं है। आईफोन के लिए असली भौतिक संकल्प खाता पिक्सेल घनत्व लेने के बाद आधे नंबर पर है, जिसका अर्थ है कि इसके भौतिक आयाम वास्तव में 320x480 हैं, जो सच है क्योंकि मैं हर बार इस कोड का उपयोग करता हूं!

इसलिए, यदि एस 3 में 2 की पिक्सेल घनत्व भी है, तो इसका असली मूल संकल्प वास्तव में 360x640px है, 720x960 नहीं, सैमसंग ने कहा है। दोबारा, डिवाइस 2 सीएसएस पिक्सेल से 1 डिवाइस पिक्सेल तक मानचित्रित करता है! इसके अलावा, पृथ्वी पर क्यों लोग परिवर्तनीय मीडिया प्रश्नों का उपयोग करते हैं, क्वैकरी मैं आपको बताता हूं!

@media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) { 

शैलियाँ यहाँ जाना }

@media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) { 

यहाँ शैलियाँ } या: तुम सिर्फ तार्किक संकल्प जो सैमसंग, ओह !, रॉकेट विज्ञान सही द्वारा प्रदान किया गया कह सकते हैं?

@media screen and (width: 720px) and (height: 1280px) and (orientation: portrait) { 

शैलियाँ }

@media screen and (width: 1280px) and (height: 720px) and (orientation: landscape) { 

शैलियाँ } बहुत ही सरल! यही सब है इसके लिए। और लोग सोचते हैं कि वे काम करने के लिए मीडिया प्रश्न क्यों नहीं प्राप्त कर सकते हैं, फिर भी वे इन सभी चर मूल्यों का उपयोग करते हैं। वास्तव में डिवाइस के लिए संकल्प को लक्षित करने का प्रयास करें। "अधिकतम-चौड़ाई", आदि जैसे चर मूल्यों का उपयोग करने के लिए पृथ्वी पर कोई कारण नहीं है।

Answer 7

इस समय, मोबाइल उपकरणों ने इतना सुधार किया है कि उनके स्क्रीन संकल्प समान हैं और कभी-कभी डेस्कटॉप स्क्रीन संकल्पों से भी बेहतर होते हैं।

उदाहरण के लिए सैमसंग के गैलेक्सी एस 4 में 1080X1920 पिक्सल है - पूर्ण एचडी स्क्रीन!

लेकिन उत्तरदायी डिजाइन में हम संकल्प की जांच करते हैं और संकल्प के अनुसार फिट होने की आवश्यकता है और यदि आप मीडिया क्वेरी जोड़ने का प्रयास करते हैं, तो मान लें कि 1000px की न्यूनतम चौड़ाई और सैमसंग गैलेक्सी एस 4 पर जांचें, आप देखेंगे कि कुछ भी नहीं हुआ है।

इसका कारण यह है कि मोबाइल उच्च घनत्व स्क्रीन में पिक्सेल के दो पहलू होते हैं।

वास्तविक संकल्प पहला संकल्प कारखाना वास्तविक संकल्प है, यह ज्यादातर वीडियो और छवियों के लिए है। सैमसंग गैलेक्सी एस 4 पर असली संकल्प 1080X1920 है।

सीएसएस रिज़ॉल्यूशन दूसरा संकल्प ब्राउज़र के लिए है। और हमारे लिए डेवलपर्स का मतलब है कि हमें वास्तविक स्क्रीन रिज़ॉल्यूशन के अनुसार अलग-अलग कार्य करने की आवश्यकता है। सैमसंग गैलेक्सी एस 4 में, सीएसएस रिज़ॉल्यूशन 360X640 है।

सैमसंग गैलेक्सी एस 4 संकल्प: रियल संकल्प: 1080x1920 सीएसएस संकल्प: 360x640

कैसे सीएसएस संकल्प प्राप्त करने के लिए? विकिपीडिया में आपके पास सभी मोबाइल डिवाइस रिज़ॉल्यूशन टेबल (टैबलेट और मोबाइल डिवाइस) हैं। http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

/*(ldpi) Android*/ 
@media only screen and (-webkit-device-pixel-ratio:.75){ 

    /*CSS */ 
} 

/*(mdpi) Android*/ 
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) { 

    /*CSS */ 
} 

/*(hdpi) Android*/ 
@media only screen and (-webkit-device-pixel-ratio:1.5){ 

    /*CSS */ 

} 

Answer 8

एंड्रॉयड 4.1.2 के साथ अपने सैमसंग एस 3 को जब मैं सभी मीडिया क्वेरी सुविधाओं (अधिकतम-ऊंचाई, चौड़ाई, ऊंचाई और चौड़ाई डिवाइस और यहां तक ​​कि रंग: 8) की कोशिश की केवल यह मेरे लिए काम किया, इसके अलावा में यह पेज में ऊपर दूसरा जवाब:

Samsung S3 डिफ़ॉल्ट ब्राउज़र

/* Samsung S3 default browser portrait*/ 
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) { 
body { background:yellow;} 
} 

/* Samsung S3 default browser landscape */ 
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape) { 
body { background:#000;} 
} 

Here is a screenshotpieroxy मीडिया क्वेरी नैदानिक ​​उपकरण परीक्षण के लिए। कृपया नोट करें कि दोनों अभिविन्यास के बिना काम करते हैं लेकिन लोड/रीफ्रेश किए बिना मालिकाना को नहीं बदलते हैं।

आशा यह किसी भी अन्य प्रश्नों के साथ कोई विवाद के साथ मदद करता है आप का उपयोग कर सकते

Answer 9

यह परीक्षण किया है और काम कर रहा है।

@media only screen and 
(device-width: 720px) and 
(device-height: 1280px) and 
(-webkit-min-device-pixel-ratio: 2)