iPhone 5 सीएसएस मीडिया क्वेरी

Question

IPhone 5 में लंबी स्क्रीन है और यह मेरी वेबसाइट के मोबाइल दृश्य को नहीं पकड़ रहा है। IPhone 5 के लिए नए उत्तरदायी डिज़ाइन प्रश्न क्या हैं और क्या मैं मौजूदा iPhone प्रश्नों के साथ संयोजन कर सकता हूं?

मेरी वर्तमान मीडिया क्वेरी यह है:

@media only screen and (max-device-width: 480px) {}

Comments

क्या हम आपके मौजूदा मीडिया प्रश्नों को देख सकते हैं?

— BoltClock

इसे इस्तेमाल करे? halgatewood.com/iphone-5-media-query

— sachleen

Answer 1

एक और उपयोगी मीडिया फीचर है device-aspect-ratio।

ध्यान दें कि iPhone 5 में 16: 9 पहलू अनुपात नहीं है । यह वास्तव में 40:71 में है।

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

आई फोन 5:
@media screen and (device-aspect-ratio: 40/71) {}

आईफ़ोन 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 प्लस:
@media screen and (device-aspect-ratio: 16/9) {}

आईपैड:
@media screen and (device-aspect-ratio: 3/4) {}

संदर्भ:
मीडिया क्वेरी @ W3C
iPhone मॉडल तुलना
पहलू अनुपात कैलकुलेटर

Comments

मुझे यह तरीका पसंद है, लेकिन जब तक स्टीफन स्प्राएल zsprawl.com/iOS/2012/09/css-media-queries-for द्वारा समझाया गया है, तब तक -webkit-min- device- पिक्सेल-अनुपात जोड़ने तक यह PhoneGap ऐप वेबव्यू में काम नहीं कर सका। -थ-आईफोन -5 । @मीडिया स्क्रीन और (डिवाइस-पहलू-अनुपात: 40/71) और (-bbkit-min-device-pixel-ratio: 2) {// iphone5 तेह

— फोनगैप के लिए

मुझे and (-webkit-min-device-pixel-ratio: 2)iPhone 5 मीडिया क्वेरी में फोनगैप वेबव्यू में काम करने के लिए जोड़ना पड़ा, जैसा कि @TaeKwonJoe ने कहा है

— महेंद्र लिया

IPhone 6 को शामिल करने के लिए इसे अपडेट करने के लिए धन्यवाद!

— मैवरिक

यह बहुत अच्छी तरह से काम करता है जब मुझे css में iphone 4 और iphone 5 की आवश्यकता होती है।

— यूरोपा

IPhone 6 के लिए, (डिवाइस-आस्पेक्ट-रेश्यो: 667/375) ने वास्तविक फिजिकल iPhone 6 पर काम नहीं किया। हालांकि इसने iOS सिम्युलेटर पर काम किया। मैंने इसे 375/667 में बदल दिया और इसने भौतिक उपकरण पर काम किया।

— अब क्या करें

Answer 2

वहाँ है, जो मैं इस ब्लॉग का श्रेय :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

ध्यान रखें कि यह iPhone 5 पर प्रतिक्रिया करता है, न कि उक्त डिवाइस पर स्थापित विशेष रूप से iOS संस्करण पर।

अपने मौजूदा संस्करण के साथ विलय करने के लिए, आपको उन्हें अल्पविराम देने में सक्षम होना चाहिए:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: मैंने उपरोक्त कोड का परीक्षण नहीं किया है, लेकिन मैंने पहले अल्पविराम @mediaप्रश्नों का परीक्षण किया है , और वे ठीक काम करते हैं।

ध्यान दें कि उपरोक्त कुछ अन्य उपकरणों को हिट कर सकता है जो गैलेक्सी नेक्सस जैसे समान अनुपात को साझा करते हैं। यहां एक अतिरिक्त विधि है जो केवल उन उपकरणों को लक्षित करेगी जिनके पास एक आयाम 640px (कुछ अजीब डिस्प्ले-पिक्सेल विसंगतियों के कारण 560px) और 960px (iPhone <5) और 1136px (iPhone 5) के बीच एक है।

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Comments

क्या आप यह सुझाव दे सकते हैं कि मैं अपने पुराने के साथ इस क्वेरी को कैसे जोड़ सकता हूं iPhone 4 और 5 दोनों को पकड़ने के लिए?

— मेवरिक

सावधानी के रूप में यह अन्य फोन के रूप में अच्छी तरह से प्रभाव होगा - न केवल iphones। एक उदाहरण सैमसंग गैलेक्सी नेक्सस है।

— माइक स्वीनी

@MikeSweeney अच्छा कॉल। मैंने अपनी पोस्ट को एक नए तरीके से अपडेट किया है जिसमें अन्य डिवाइस शामिल नहीं होने चाहिए।

— एरिक

@ यह बहुत ज्यादा है जो मैं क्रॉस-फोन परीक्षण के एक झुंड के बाद बसने से जख्मी हो गया था - मिश्रण में ऊंचाई लाना था! लगता है 7-8 विभिन्न फोन मैं परीक्षण पर महान काम कर रहा है।

— माइक स्वीनी

क्या यह लाइन सही है iPhone 5 and not to iOS 6:? यह होना चाहिए: "iPhone5 और iPhone 6 के लिए नहीं"?

— सग्नल

Answer 3

ऊपर सूचीबद्ध ये सभी उत्तर, जो उपयोग max-device-widthया max-device-heightमीडिया प्रश्नों के लिए, बहुत मजबूत बग से पीड़ित हैं: वे बहुत सारे अन्य लोकप्रिय मोबाइल उपकरणों को लक्षित करते हैं (शायद अवांछित और कभी भी परीक्षण नहीं किया गया है, या जो भविष्य में बाजार को प्रभावित करेगा)।

यह क्वेरी किसी भी डिवाइस के लिए काम करेगी जिसमें एक छोटी स्क्रीन है , और शायद आपका डिज़ाइन टूट जाएगा।

इसी तरह के डिवाइस-विशिष्ट मीडिया प्रश्नों (एचटीसी, सैमसंग, आईपीओडी, नेक्सस के लिए) के साथ संयुक्त ... यह अभ्यास एक टाइम-बम लॉन्च करेगा। डीबगिंग के लिए, यह विचार आपके सीएसएस को अनियंत्रित स्पेगेटी बना सकता है। आप कभी भी सभी संभावित उपकरणों का परीक्षण नहीं कर सकते।

कृपया ध्यान रखें कि केवल मीडिया क्वेरी हमेशा IPhone5 को लक्षित करता है और कुछ नहीं , है:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

ध्यान दें कि सटीक चौड़ाई और ऊँचाई, अधिकतम-चौड़ाई यहाँ जाँची नहीं गई है।

---

अब, उपाय क्या है? यदि आप एक वेबपेज लिखना चाहते हैं जो सभी संभव उपकरणों पर अच्छा लगेगा, तो सबसे अच्छा अभ्यास यह है कि आप गिरावट का उपयोग करें

/ * गिरावट पैटर्न हम स्क्रीन की चौड़ाई की जाँच केवल सुनिश्चित कर रहे हैं, यह परिवर्तन पोर्ट्रेट से परिदृश्य में बदल रहा है * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

यदि आपकी वेबसाइट के 30% से अधिक आगंतुक मोबाइल से आते हैं, तो मोबाइल-पहले दृष्टिकोण प्रदान करते हुए, इस योजना को उल्टा कर दें। min-device-widthउस स्थिति में उपयोग करें । यह मोबाइल ब्राउज़रों के लिए वेबपेज रेंडरिंग को गति देगा।

Comments

मैं सबसे पहले प्रगतिशील वृद्धि और मोबाइल पर जाऊंगा। यह मोबाइल के साथ शुरुआत कर रहा है और मिन-डिवाइस-चौड़ाई का उपयोग कर निर्माण कर रहा है।

— प्रमावेर 133

यह भी ध्यान दें कि ऊँचाई / चौड़ाई / पिक्सेल-अनुपात समाधान जो केवल iPhone 5 से मेल खाता है, अगले फोन से भी मेल खाता है जो प्रकट होता है जिसमें समान विशेषताएं होती हैं। आपके उत्तर का समग्र विषय सही है: विशिष्ट उपकरणों के संदर्भ में सोचना आगे बढ़ने का गलत तरीका है।

— नुकीले

@Dan - भले ही आपका उत्तर सीधे प्रश्न को संबोधित नहीं करता है, यह इसे उत्तरदायी डिजाइन के लिए सर्वोत्तम प्रथाओं के व्यापक परिप्रेक्ष्य में देखता है। मेरी राय में, आपके द्वारा लिखी गई बातें बहुत गहरी और व्यावहारिक हैं। पांच सितारे।

— दिमित्री वोरोंत्ज़ोव

@ - अपने सुझाव को लागू करने की कोशिश कर रहा है, कुछ काम नहीं कर रहा है। क्या मैं आपसे एक नज़र डालने के लिए कह सकता हूँ: stackoverflow.com/questions/16486078/…

— दिमित्री वोरोंत्ज़ोव

@primavera, कृपया कहें। मोबाइल का पहला तरीका क्या है?

— एस ..

Answer 4

मेरे लिए, काम करने वाली क्वेरी थी:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

Answer 5

चित्र और परिदृश्य में iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

परिदृश्य में iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

चित्र में iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Comments

आपको max-device-width : 568pxपोर्ट्रेट की आवश्यकता क्यों है ?

— adi518 16

@ adi518 यदि आप अधिकतम-चौड़ाई का उपयोग नहीं करते हैं, तो 320x से अधिक किसी भी डिवाइस के लिए css नियम लागू किए जाते हैं, जो कि शाब्दिक रूप से अधिकांश उपकरणों की तरह है - टेबलेट डेस्कटॉप आदि

— सुधीर

device-width: 320px and device-height: 568pxइसके बजाय उपयोग क्यों नहीं ?

— एडी ५१ ad

Answer 6

मेरे लिए कोई भी प्रतिक्रिया फोनगैप ऐप को लक्षित करने के लिए काम नहीं करती है।

निम्नलिखित लिंक बिंदुओं के रूप में , नीचे दिया गया समाधान काम करता है।

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Answer 7

बस एक बहुत ही त्वरित जोड़ के रूप में मैं कुछ विकल्पों का परीक्षण कर रहा हूं और इस तरह से चूक गया। सुनिश्चित करें कि आपके पृष्ठ में है:

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

Answer 8

आप iPhone5 के साथ-साथ मोबाइल उपकरणों के लिए मीडिया सुविधा डेटाबेस पर अन्य स्मार्टफ़ोन के लिए अपना उत्तर आसानी से प्राप्त कर सकते हैं:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

तुम भी एक ही वेबसाइट पर परीक्षण पृष्ठ पर अपने स्वयं के डिवाइस मान प्राप्त कर सकते हैं।

(अस्वीकरण: यह मेरी वेबसाइट है)

Answer 9

afaik no iPhone 1.5 के पिक्सेल-अनुपात का उपयोग करता है

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

Answer 10

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Answer 11

आपको सभी आईफ़ोन को पकड़ने के लिए शायद "-webkit-min-device-pixel-ratio" 1.5 से नीचे कर देना चाहिए?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}

Comments

कौन सा iPhone 1.5 के डिवाइस पिक्सेल अनुपात का उपयोग कर रहा है?

— BoltClock

मैं डिवाइस की चौड़ाई और डिवाइस नाम (iPhone) के आधार पर मीडिया क्वेरी करने की अत्यधिक सलाह देता हूं। इसलिए यदि iPhone 5 में अधिक चौड़ाई है, तो बस उसे उपयोग करने योग्य बनाएं।

— टॉम रोजगारो सेप