मोबाइल वेब के लिए अधिकतम-डिवाइस-चौड़ाई और अधिकतम-चौड़ाई के बीच क्या अंतर है?

Question

मैं iPhone / एंड्रॉयड फोन के लिए कुछ HTML पृष्ठों विकसित करने की आवश्यकता है, लेकिन दोनों के बीच क्या अंतर है max-device-widthऔर max-width? मुझे अलग-अलग स्क्रीन आकार के लिए अलग-अलग सीएसएस का उपयोग करने की आवश्यकता है।

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

क्या फर्क पड़ता है?

Comments

संबंधित: क्या मुझे अधिकतम-डिवाइस-चौड़ाई या अधिकतम-चौड़ाई का उपयोग करना चाहिए?

— जोश क्रॉजियर

मैंने पाया है कि max-device-widthभले ही <meta name="viewport" ...>टैग छोटे स्क्रीन उपकरणों के लिए शामिल नहीं है और max-widthएक metaटैग के बिना काम नहीं करता है

— फैजान अकरम डार

Answer 1

max-width लक्ष्य प्रदर्शन क्षेत्र की चौड़ाई है, जैसे ब्राउज़र

max-device-width डिवाइस के पूरे रेंडरिंग एरिया की चौड़ाई यानी वास्तविक डिवाइस स्क्रीन है

उसी के लिए max-heightऔर max-device-heightस्वाभाविक रूप से चला जाता है ।

Comments

यदि आप अपने ब्राउज़र का आकार बदलते समय परिवर्तन देखना चाहते हैं, तो विकास के लिए अधिकतम-चौड़ाई का उपयोग करें, हालांकि अधिकतम-डिवाइस-चौड़ाई उत्पादन के लिए अधिक सटीक है।

— जॉन मैग्नोलिया

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

— e_ परिचित

@eknown मैं सहमत हूँ। कौशल / ज्ञान के पूरे स्पेक्ट्रम के उपयोगकर्ताओं के पास हमेशा अपने डेस्कटॉप ब्राउज़र विंडो को अधिकतम नहीं किया जाता है (लेकिन मैंने अभी तक एक टैबलेट या फोन नहीं देखा है जिसमें एक ब्राउज़र है जिसे अधिकतम नहीं खोला गया है - मुझे लगता है कि यह हाइब्रिड ऐप में संभव है, लेकिन यह एक अलग मामला है)। मैक्स-चौड़ाई निश्चित रूप से अधिक सार्वभौमिक होगी।

— जेसन

@eknown मैं असहमत हूँ। आपकी शैलियों के आधार पर, उस मीडिया ब्रेकपॉइंट को हिट करने के बाद आपका बहुत अलग रूप हो सकता है और यदि आप मीडिया ब्रेकप्वाइंट के आधार पर स्टाइलशीट लोड कर रहे हैं, तो साइट के लिए ब्राउज़र विंडो का आकार बदलते समय पूरी तरह से अलग दिखने के लिए बहुत परेशान हो सकता है।

— ट्विनप्राइमएयरेज़

यदि आपको मोबाइल उपकरणों के लिए मौलिक रूप से अलग लेआउट मिला है, तो मूल कारण यह है कि कोई माउस कर्सर नहीं है (उन्हें स्क्रॉल करने के लिए बड़े बटन और एकल कॉलम की आवश्यकता होती है)। उस मामले में उपयोग करने के लिए एक महान मीडिया क्वेरी है @media screen and (pointer: coarse) and (hover: none)जो भविष्य में उनकी स्क्रीन में कितने पिक्सेल मोबाइल उपकरणों को पैक करने के बावजूद मोबाइल संस्करण पर स्विच करेगी।

— EoghanM

Answer 2

max-widthव्यूपोर्ट की चौड़ाई को संदर्भित करता है और इसके साथ संयोजन में विशिष्ट आकार या झुकाव को लक्षित करने के लिए इस्तेमाल किया जा सकता है max-height। एकाधिक max-width(या min-width) स्थितियों का उपयोग करके आप पृष्ठ स्टाइल को बदल सकते हैं क्योंकि ब्राउज़र का आकार बदल जाता है या iPhone जैसे उपकरण पर उन्मुखीकरण बदल जाता है।

max-device-widthडिवाइस के व्यूपोर्ट आकार को संदर्भित करता है, भले ही अभिविन्यास, वर्तमान पैमाने या आकार का हो। यह एक डिवाइस पर नहीं बदलेगा ताकि स्टाइल शीट या सीएसएस निर्देशों को स्विच करने के लिए उपयोग नहीं किया जा सके क्योंकि स्क्रीन घुमाया या आकार बदला गया है।

Comments

इस जवाब ने इसे मेरे लिए स्वीकृत जवाब से बेहतर "क्लिक" कर दिया। यह अधिकांश अनुप्रयोगों के लिए लगता है, max-widthऔर max-heightउपयोग करने वाले होंगे।

— hotshot309

@JackieChiles दूसरे SO थ्रेड में एक अच्छा बिंदु बनाता है, जिस पर विचार करना चाहिए (बड़े उपकरणों पर दिखने वाली मोबाइल शैलियों के बारे में): stackoverflow.com/questions/8564752/…

— hotshot309

यह अच्छा उत्तर पूर्ण नहीं है: अभिविन्यास स्वैप करता है डिवाइस-चौड़ाई और डिवाइस-ऊँचाई Android पर लेकिन iOS नहीं: quirksmode.org/blog/archives/2010/04/the_orientation.html देखें ।

Answer 3

आप इस शैली का उपयोग करने के बारे में क्या सोचते हैं?

सभी ब्रेकपॉइंट्स के लिए जो ज्यादातर "मोबाइल डिवाइस" के लिए हैं, मैं उपयोग करता हूं min(max)-device-widthऔर ब्रेकप्वाइंट के लिए जो ज्यादातर "डेस्कटॉप" उपयोग के लिए हैं min(max)-width।

बहुत सारे "मोबाइल डिवाइस" हैं जो चौड़ाई की बुरी तरह से गणना करते हैं।

को देखो http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

Comments

इस सवाल का जवाब नहीं है और वास्तव में अपने ब्रेकप्वाइंट पर काम करने का एक बुरा तरीका है - सावधान रहें।

— चालीस

Answer 4

अधिकतम-डिवाइस-चौड़ाई डिवाइस रेंडरिंग चौड़ाई है

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

अधिकतम-चौड़ाई लक्ष्य प्रदर्शन क्षेत्र की चौड़ाई का अर्थ है ब्राउज़र का वर्तमान आकार।

Comments

@मीडिया सभी और (अधिकतम-चौड़ाई: 400px) {} क्या अंतर है

— virsir

Answer 5

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

Answer 6

अधिकतम-चौड़ाई लक्ष्य प्रदर्शन क्षेत्र की चौड़ाई है, जैसे ब्राउज़र; अधिकतम-डिवाइस-चौड़ाई डिवाइस के संपूर्ण रेंडरिंग क्षेत्र की चौड़ाई है, अर्थात वास्तविक डिवाइस स्क्रीन।

• यदि आप अपने डेस्कटॉप पर ब्राउज़र विंडो का आकार बदलते हैं, तो अधिकतम डिवाइस-चौड़ाई का उपयोग कर रहे हैं , सीएसएस शैली अलग-अलग मीडिया क्वेरी सेटिंग में नहीं बदलेगी;

• यदि आप अपने डेस्कटॉप पर ब्राउज़र का आकार बदलते समय अधिकतम चौड़ाई का उपयोग कर रहे हैं , तो सीएसएस अलग-अलग मीडिया क्वेरी सेटिंग में बदल जाएगा और आपको मोबाइल के लिए स्टाइल के साथ दिखाया जा सकता है, जैसे कि टच-फ्रेंडली मेनू।

Answer 7

यदि आप एक क्रॉस-प्लेटफ़ॉर्म ऐप बना रहे हैं (उदाहरण के लिए, फ़ोनगैप / कॉर्डोवा का उपयोग करके), तो

उपकरण-चौड़ाई या उपकरण-ऊँचाई का उपयोग न करें। सीएसएस मीडिया प्रश्नों में चौड़ाई या ऊंचाई का उपयोग करें क्योंकि एंड्रॉइड डिवाइस डिवाइस-चौड़ाई या डिवाइस-ऊंचाई में समस्याएं देगा। IOS के लिए यह ठीक काम करता है। केवल Android उपकरण उपकरण-चौड़ाई / उपकरण-ऊँचाई का समर्थन नहीं करते हैं।

Answer 8

अब उपकरण-चौड़ाई / ऊँचाई का उपयोग न करें।

डिवाइस-चौड़ाई, डिवाइस-ऊंचाई और डिवाइस-पहलू-अनुपात मीडिया क्वेरी स्तर 4 में चित्रित किए गए हैं: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

विशिष्ट उपकरणों को लक्षित करने के लिए अभिविन्यास और (न्यूनतम / अधिकतम-) संकल्प के संयोजन में बस चौड़ाई / ऊंचाई (न्यूनतम / अधिकतम के बिना) का उपयोग करें। मोबाइल की चौड़ाई / ऊँचाई पर उपकरण-चौड़ाई / ऊँचाई समान होनी चाहिए।

Comments

सादे "डिवाइस-एक्सएक्सएक्स" आइटम को हटा दिया जाता है, "अधिकतम-डिवाइस-एक्सएक्सएक्स" आइटम को अपग्रेड नहीं किया जाता है।

— रोजर क्रुएगर

@RogerKrueger क्या आप इसके बारे में निश्चित हैं? मुझे यह इंगित करने के लिए कुछ भी नहीं दिख रहा है कि अधिकतम डिवाइस-एक्सएक्सएक्स मीडिया प्रश्नों को पदावनत नहीं किया गया है।

— जॉनी कुक