वेब ऐप्लिकेशन में अलग-अलग स्क्रीन पर काम करने की सुविधा

Android अलग-अलग स्क्रीन साइज़ और पिक्सल डेंसिटी वाले डिवाइसों पर उपलब्ध है, अपने वेब डिज़ाइन में इन कारकों को ध्यान में रखें, ताकि आपके पेजों का साइज़ सही हो. WebView डीओएम, सीएसएस, और मेटा टैग के साथ काम करता है सुविधाएं इस्तेमाल करें, ताकि आप वेब कॉन्टेंट को सही तरीके से रेंडर कर सकें.

Android पर चलने वाले डिवाइसों के लिए अपने वेब पेजों को टारगेट करते समय, दो मुख्य बातों को ध्यान में रखें इसके लिए:

व्यूपोर्ट
व्यूपोर्ट वह आयताकार क्षेत्र है जो आपके वेब पेज के लिए ड्रॉ करने लायक हिस्सा देता है. आपने लोगों तक पहुंचाया मुफ़्त में कई व्यूपोर्ट प्रॉपर्टी के बारे में बता सकता है, जैसे कि उसका साइज़ और शुरुआती स्केल. सबसे ज़रूरी है कि व्यूपोर्ट की चौड़ाई, जो वेब पेज से उपलब्ध हॉरिज़ॉन्टल पिक्सल की कुल संख्या के बारे में बताती है पॉइंट ऑफ़ व्यू—उपलब्ध सीएसएस पिक्सल की संख्या.
स्क्रीन की सघनता
WebView क्लास और Android पर ज़्यादातर वेब ब्राउज़र आपके सीएसएस पिक्सल वैल्यू को कन्वर्ट करते हैं , जैसे कि डेंसिटी-इंडिपेंडेंट पिक्सल वैल्यू में वेब पेज का साइज़ मध्यम-डेंसिटी वाली स्क्रीन—करीब 160 डीपीआई. हालांकि, अगर ग्राफ़िक आपके समाचार संगठन का वेब डिज़ाइन के लिए, अलग-अलग डेंसिटी पर होने वाली स्केलिंग पर ध्यान दें. उदाहरण के लिए, अगर किसी इमेज का इसकी चौड़ाई, 320 डीपीआई स्क्रीन पर 300 पिक्सल की होती है. इसे स्केल किया जाता है. यह हर सीएसएस के लिए ज़्यादा फ़िज़िकल पिक्सल का इस्तेमाल करता है Pixel है. इससे धुंधला करने और पिक्सलेशन जैसे आर्टफ़ैक्ट बनाए जा सकते हैं. आसानी से इस्तेमाल करने के लिए, Android छोटा हो जाता है ज़्यादातर छोटी स्क्रीन डेंसिटी को कुछ सामान्य कैटगरी में बांटा जाता है: छोटी, मीडियम, और बड़ी. सीखने में स्क्रीन की डेंसिटी के बारे में ज़्यादा जानें, पढ़ें अलग-अलग पिक्सल डेंसिटी के साथ काम करना.

यहां दिए गए मिलते-जुलते संसाधनों को देखें:

व्यूपोर्ट प्रॉपर्टी के बारे में बताएं

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

ज़्यादातर Android पर Chrome के साथ-साथ वेब ब्राउज़र पर, व्यूपोर्ट को डिफ़ॉल्ट रूप से बड़े साइज़ पर सेट किया जाता है. इस _wide व्यूपोर्ट मोड_ की चौड़ाई करीब 980 पिक्सल है. कई ब्राउज़र भी ज़ूम आउट करते हैं, डिफ़ॉल्ट रूप से, व्यूपोर्ट की पूरी चौड़ाई दिखाना संभव है. इसे _overview मोड_ कहा जाता है.

अपने वेब पेज के लिए, व्यूपोर्ट की प्रॉपर्टी तय की जा सकती हैं. जैसे, चौड़ाई और शुरुआती ज़ूम लेवल की जानकारी देने के लिए, अपने दस्तावेज़ में <meta name="viewport" ...> टैग का इस्तेमाल करें <head>.

यह सिंटैक्स, इस्तेमाल की जा सकने वाली सभी व्यूपोर्ट प्रॉपर्टी और वैल्यू के टाइप दिखाता है हर एक ने स्वीकार किया:

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

उदाहरण के लिए, यह <meta> टैग बताता है कि व्यूपोर्ट की चौड़ाई मेल खाती है डिवाइस की स्क्रीन की चौड़ाई और ज़ूम करने की सुविधा बंद हो:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

मोबाइल डिवाइस के लिए अपनी साइट को ऑप्टिमाइज़ करते समय, चौड़ाई को आम तौर पर "device-width" ताकि साइज़ सभी डिवाइसों में ठीक से फ़िट हो जाए. इसके बाद, सीएसएस मीडिया क्वेरी का इस्तेमाल करके अलग-अलग स्क्रीन साइज़ के हिसाब से, लेआउट को ज़रूरत के हिसाब से बदला जा सकता है.

सीएसएस की मदद से डिवाइस की डेंसिटी को टारगेट करें

WebView, -webkit-device-pixel-ratio का इस्तेमाल करता है, जो एक सीएसएस मीडिया है सुविधा की मदद से आप खास स्क्रीन डेंसिटी के लिए स्टाइल बना सकते हैं. इस पर लागू किया जाने वाला मान यह बताने के लिए कि स्टाइल, कम-, मीडियम- या ज़्यादा डेंसिटी वाली स्क्रीन.

आप हर सघनता के लिए अलग-अलग स्टाइलशीट बना सकते हैं:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

या एक स्टाइलशीट में अलग-अलग स्टाइल के बारे में बताएं:

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

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

JavaScript की मदद से डिवाइस की डेंसिटी को टारगेट करें

WebView, window.devicePixelRatio के साथ काम करता है, जो एक DOM प्रॉपर्टी है से मौजूदा डिवाइस की सघनता के बारे में क्वेरी की जा सकती है. इस प्रॉपर्टी की वैल्यू, स्केलिंग के बारे में बताती है मौजूदा डिवाइस के लिए इस्तेमाल किया गया कारक. अगर window.devicePixelRatio की वैल्यू 1.0 है, इस तरह, उस डिवाइस को मीडियम डेंसिटी वाला डिवाइस माना जाता है. इसमें डिफ़ॉल्ट रूप से कोई स्केलिंग लागू नहीं होती. अगर वैल्यू 1.5 है, तो डिवाइस को ज़्यादा डेंसिटी वाला डिवाइस माना जाता है. साथ ही, पेज का साइज़ 1.5 गुना होता है डिफ़ॉल्ट. अगर वैल्यू 0.75 है, तो डिवाइस को कम डेंसिटी वाला डिवाइस माना जाता है. साथ ही, अगर पेज की वैल्यू 0.75 है, तो डिफ़ॉल्ट रूप से 0.75x स्केल किया जाता है.

Android ब्राउज़र और WebView को लागू करने वाली स्केलिंग, वेब पेज के टारगेट का घनत्व. जैसा कि व्यूपोर्ट की जानकारी देने वाले सेक्शन में बताया गया है टारगेट का घनत्व, डिफ़ॉल्ट टारगेट मध्यम-डेंसिटी होता है, लेकिन आप टारगेट को बदलकर आपके वेब पेज को अलग-अलग स्क्रीन डेंसिटी के हिसाब से स्केल कैसे किया जाता है.

उदाहरण के लिए, JavaScript की मदद से डिवाइस की सघनता के बारे में क्वेरी करने का तरीका यहां बताया गया है:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}