HTTP हेडर में डिवाइस रिज़ॉल्यूशन, पिक्सेल घनत्व, आदि शामिल क्यों नहीं हैं?

10

मैं वर्तमान में CSS मीडिया प्रश्नों के साथ एक उत्तरदायी वेबसाइट विकसित कर रहा हूं। यदि सर्वर प्रत्येक व्यूपोर्ट के लिए एक अलग HTML / CSS लौटाता है तो यह बहुत आसान होगा।
मैं सोच रहा था कि HTML फ़ाइल का अनुरोध करने पर क्लाइंट इसकी व्यूपोर्ट जानकारी क्यों शामिल नहीं कर सकता। Accept-Languageहेडर का उपयोग करके सही भाषा में वेबसाइटों को वापस करने के लिए यह व्यवहार पहले से ही सामान्य है ।

http

— eliocs
स्रोत

आप इसे जावास्क्रिप्ट के माध्यम से भेज सकते हैं और फिर CSS फ़ाइल को साइडलोड कर सकते हैं। मुझे लगता है कि समस्या यह है कि संकल्प बदल सकता है ...

— किर्न्ड

वह आरडब्ल्यूडी नहीं है। जब तक आप पृष्ठ को ताज़ा नहीं करते हैं, तब तक HTML / CSS आपको कोई प्रतिक्रियात्मक प्रभाव नहीं देगा।

— महदी

रिज़ॉल्यूशन, फॉन्ट स्टाइल, फॉन्ट साइज़, ब्राउज़र टाइप, स्क्रीन साइज़, ये सभी डिवाइस से डिवाइस में परस्पर भिन्न होते हैं। आप वेब 1.0 टाइप प्रश्न पूछ रहे हैं, या तो एएसपी, पीएचपी जैसे कुछ डायनामिक पर जाएं, जावास्क्रिप्ट जोड़ना, इत्यादि। मीडिया चयनकर्ता से खुश है कि html आपको देता है।

— जेफ लैंगमेयर

1

क्या होगा यदि बिना किसी छवि के सॉफ्टवेयर प्रदर्शित करने की क्षमता ब्राउज़र के बजाय आपके HTML के लिए पूछती है? जैसे स्क्रीन रीडर? या एक टर्मिनल-आधारित ब्राउज़र?

— जैक

18

संक्षेप में, यह नहीं था कि वाइल्ड वाइल्ड वेब को कैसे काम करने के लिए डिज़ाइन किया गया था।

मूल डिज़ाइन बस इतना था कि HTML ने दस्तावेज़ के बारे में ब्राउज़र संकेत दिए थे। किन बिट्स पर जोर देना है, जहां छवि फ़ाइलों को प्राप्त करने के लिए जाना है। फ़ॉन्ट (और साथ ही किस आकार) के बारे में निर्णय ब्राउज़र और स्थानीय कॉन्फ़िगरेशन सेटिंग्स का काम था।

हां, मुझे पता है कि दुनिया आगे बढ़ गई है, और अब वेब डिजाइनर हमारी आंखों को देखने के लिए हर पिक्सेल को नियंत्रित करने की उम्मीद करते हैं। बीते समय में, यह डेस्कटॉप थीम का काम था।

— माइकल शॉ
स्रोत

3

मैं कहूंगा कि आज भी यह डिवाइस का काम होना चाहिए। युगल अलग-अलग न्यूनतम सीएसएस सेट करें और उपकरणों को वहां से संभालने दें।

— जेफ लैंगमेयर

@JeffLangemeier पूरी तरह से सहमत हैं। यहां तक कि यह उत्तर संक्षेप में सही है, हालांकि यह आरडब्ल्यूडी के बारे में बिल्कुल भी बात नहीं कर रहा है।

— महदी

1

शायद एक नए वेब प्रारूप को फिर से डिज़ाइन करने का समय जो पूरी तरह से डिजाइन से सामग्री को अलग करता है :)

— एलियक्स

@ मेहदी मुझे वास्तव में ऐसा नहीं लगता है कि प्रश्न वैसे भी आरडब्ल्यूडी के बारे में था, यह एक व्यक्ति था जो पहिया को सुदृढ़ करने की कोशिश कर रहा था और सोच रहा था कि HTML कल्पना की <मनमानी व्यक्तिगत आवश्यकता> क्यों नहीं है।

— जेफ लैंगमेयर

@eliocs है, इसे html और CSS कहा जाता है। HTML संरचना है, और CSS डिजाइन है। या यदि आप अपने डिजाइन से कुल सामग्री को अलग करना चाहते हैं, तो एक डायनामिक सिस्टम जैसे PHP, django in python, आदि में जाएं ...

— Jeff Langemeier

8

मुझे लगता है कि आपको पूरी तरह से उत्तरदायी वेब डिज़ाइन का विचार नहीं मिला है । क्लाइंट के वेब-ब्राउजर पर आधारित अलग-अलग HTML / CSS / JS सेवित करना कुछ समय के लिए रहा है और मुझे पूरा यकीन है कि अभी भी कुछ वेबसाइटें ऐसा कर रही हैं - एक बहुत ही स्पष्ट उदाहरण मोबाइल को परोसने का पुराना स्कूल तरीका है एक वेबसाइट के लिए दोस्ती विषय।

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

इसके अलावा HTTP अनुरोध केवल पूरे वेब पेज को सर्वर के लिए डिज़ाइन नहीं किया गया है । कई मामलों में आप सादे डेटा, फ़ाइलें, चित्र आदि भेजने / प्राप्त करने के लिए अनुरोध भेज रहे हैं, जिन्हें उन्हें व्यू-पोर्ट मेटा जानकारी पर ले जाने की आवश्यकता नहीं है और इंटरनेट जैसे पैमाने में ओवरहेड बहुत होगा, मुझे लगता है ।

— महदी
स्रोत

भूमि के ऊपर भी छवियां दिखाने वाले उपयोगी होगा, कल्पना करें कि आप मोबाइल उपकरणों के लिए छोटे संकल्प छवियों लौट आए। मैं मानता हूं कि पृष्ठ लोड होने के बाद व्यूपोर्ट में परिवर्तन मेरे विचार पर बड़ी खामी है।

— एलिकोज

@eliocs आप सही हैं, छवियों के लिए वास्तव में यह एक महत्वपूर्ण बात है। सुधारों के लिए धन्यवाद।

— महदी

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

— 19

2

क्या आप वाकई उत्तरदायी डिज़ाइन कर रहे हैं? उत्तरदायी डिजाइन तकनीकी रूप से द्रव डिजाइन और मीडिया प्रश्नों का संयोजन है।

अगर आप चीजों को किस तरह से रखते हैं, इसके बारे में चतुर होने पर आपके लिए फ्लुइड डिज़ाइन 90% व्यूपोर्ट इश्यू को हल करता है। मीडिया क्वेरीज़ आपको वर्तमान आयामों के आधार पर ग्रिड विशेषताओं को बदलकर अन्य 10% प्राप्त करती हैं।

यदि आप केवल तरल पदार्थ (हर जगह प्रतिशत, सब कुछ पर सापेक्ष आकार देने, पिक्सेल में निर्दिष्ट कुछ भी नहीं, आदि) करने की कोशिश कर रहे हैं, तो आप इस समस्या में भाग लेते हैं कि क्या करना है जब व्यूपोर्ट नाटकीय रूप से आकार में भिन्न होता है (जैसे कि डेस्कटॉप परिदृश्य दृश्य बनाम। एक मोबाइल चित्र दृश्य)। जब आप 2048px से 640px तक जाते हैं तो कुछ चीजें बस फिट नहीं होती हैं। जब आप केवल मीडिया क्वेरी करने का प्रयास करते हैं, तो आप दर्जनों और दर्जनों मीडिया क्वेरी को समाप्त कर देते हैं, और आप मूल रूप से उस मामले में अपने सीएसएस कक्षाओं को माइक्रोक्रोमेंज कर रहे हैं। RWD के लिए न तो दृष्टिकोण पर्याप्त है - आपको सब कुछ प्राप्त करने के लिए दोनों को संयोजित करना होगा।

मेरी सलाह: डेस्कटॉप परिदृश्य, iPad चित्र और परिदृश्य, iPhone चित्र और परिदृश्य जैसे - तीन या चार अलग-अलग "नाममात्र संकल्प और अभिविन्यास" बनाएं - और उनसे काम करने के लिए अपने वायरफ्रेम के रूप में व्यवहार करें। फिर उन विरामों के लिए अपने मीडिया प्रश्नों को सेट करें। फिर उन कुछ विरामों से चिपके रहने के लिए वास्तव में कड़ी मेहनत करें, इसे पूरा करने के लिए द्रव लेआउट का उपयोग करें - सबसे अधिक संभावना है कि किसी प्रकार के सीएसएस ग्रिड के साथ (आपके लिए दर्जनों ऐसे हैं जो आपके लिए पूर्वनिर्मित हैं, या आप अपना खुद का रोल कर सकते हैं)।

— Calphool
स्रोत

1

यदि आपके पास एक डायनामिक वेबसाइट है जो सामग्री लाती है, तो इस तरह का एक कोड ट्रिक करेगा (ES6 में)

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

नोट: 'क्रेडेंशियल्स' सत्र कुकी के लिए है

फिर आप उन हेडर सर्वर-साइड को उदाहरण के साथ (PHP में) पढ़ सकते हैं:

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

— आमे घुमंतू
स्रोत

यह अब केवल सही उत्तर है।

— marvindanig

1

यह उस सरल कारण के लिए काम नहीं करेगा जो उपयोगकर्ता बिना पेज रीलोड के ब्राउज़र विंडो का आकार बदल सकता है।

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

— JacquesB
स्रोत