पिक्सल-परफ़ेक्ट वेबव्यू

पब्लिश करने की तारीख: 28 फ़रवरी, 2014

अपने वेबव्यू के लिए बेहतरीन इंटरफ़ेस बनाने के लिए, कई विकल्पों का इस्तेमाल किया जा सकता है.

व्यूपोर्ट मेटा टैग सेट करना

व्यूपोर्ट मेटा टैग, आपके वेब ऐप्लिकेशन में जोड़ने के लिए सबसे ज़रूरी टैग है. इसके बिना, वेबव्यू ऐसा काम कर सकता है जैसे आपकी साइट को डेस्कटॉप ब्राउज़र के लिए डिज़ाइन किया गया हो. इससे आपके वेब पेज को ज़्यादा चौड़ाई (आम तौर पर 980 पिक्सल) दी जाती है और उसे वेबव्यू की चौड़ाई में फ़िट करने के लिए स्केल किया जाता है. ज़्यादातर मामलों में, इससे पेज का छोटा 'खास जानकारी' वर्शन दिखता है. इसमें कॉन्टेंट को पढ़ने के लिए, उपयोगकर्ता को पैन और ज़ूम करना पड़ता है.

अगर आपको अपनी साइट की चौड़ाई, वेबव्यू की चौड़ाई के 100% के बराबर करनी है, तो व्यूपोर्ट मेटा टैग सेट करें:

<meta name="viewport" content="width=device-width, initial-scale=1">

पेज के लेआउट पर ज़्यादा कंट्रोल पाने के लिए, चौड़ाई को खास वैल्यू device-width पर सेट करें.

डिफ़ॉल्ट रूप से, WebView, व्यूपोर्ट को डिवाइस-चौड़ाई पर सेट करता है, न कि डिफ़ॉल्ट रूप से डेस्कटॉप व्यूपोर्ट पर. हालांकि, भरोसेमंद और कंट्रोल किए गए व्यवहार के लिए, व्यूपोर्ट मेटा टैग शामिल करना अच्छा होता है.

डेस्कटॉप साइटें दिखाना

कुछ मामलों में, आपको ऐसा कॉन्टेंट दिखाना पड़ सकता है जो मोबाइल डिवाइसों के लिए डिज़ाइन नहीं किया गया है. उदाहरण के लिए, ऐसा कॉन्टेंट दिखाना जिसे आपने अपलोड नहीं किया है. इस मामले में, वेबव्यू को डेस्कटॉप साइज़ के व्यूपोर्ट का इस्तेमाल करने के लिए मजबूर किया जा सकता है:

• setUseWideViewPort(true)
• setLoadWithOverviewMode(true)

अगर ये तरीके सेट नहीं किए गए हैं और कोई व्यूपोर्ट तय नहीं किया गया है, तो वेबव्यू, कॉन्टेंट के साइज़ के आधार पर व्यूपोर्ट की चौड़ाई सेट करने की कोशिश करता है.

इसके अलावा, लेआउट एल्गोरिदम TEXT_AUTOSIZING का इस्तेमाल किया जा सकता है. इससे फ़ॉन्ट साइज़ बढ़ जाता है, ताकि मोबाइल डिवाइस पर टेक्स्ट को आसानी से पढ़ा जा सके. setLayoutAlgorithm देखें.

रिस्पॉन्सिव डिज़ाइन का इस्तेमाल करना

रिस्पॉन्सिव डिज़ाइन, स्क्रीन साइज़ के हिसाब से बदलने वाले इंटरफ़ेस को डिज़ाइन करने का एक तरीका है.

रिस्पॉन्सिव डिज़ाइन को लागू करने के कई तरीके हैं. सबसे आम क्वेरी में से एक है @media क्वेरी, जो डिवाइस की विशेषताओं के आधार पर एलिमेंट पर सीएसएस लागू करती है.

उदाहरण के लिए, मान लें कि आपको ओरिएंटेशन के आधार पर, वर्टिकल लेआउट से हॉरिज़ॉन्टल लेआउट पर स्विच करना है. सीएसएस प्रॉपर्टी को डिफ़ॉल्ट रूप से पोर्ट्रेट पर सेट करें:

.page-container {
    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding: 20px;
    box-sizing: border-box;
}

हॉरिज़ॉन्टल लेआउट पर स्विच करने के लिए, ओरिएंटेशन के आधार पर flex-direction प्रॉपर्टी को स्विच करें:

@media screen and (orientation: landscape) {
  .page-container.notification-opened {
    -webkit-box-orient: horizontal;
    flex-direction: row;
  }

  .page-container.notification-opened > .notification-arrow {
    margin-right: 20px;
  }
}

स्क्रीन की चौड़ाई के हिसाब से भी लेआउट बदला जा सकता है.

उदाहरण के लिए, स्क्रीन के साइज़ के बढ़ने के साथ बटन की चौड़ाई को 100% से कम करने पर.

button {
  display: block;
  width: 100%;
  ...
}

@media screen and (min-width: 500px) {
  button {
    width: 60%;
  }
}

@media screen and (min-width: 750px) {
  button {
    width: 40%;
    max-width: 400px;
  }
}

ये छोटे बदलाव हैं, लेकिन आपके यूज़र इंटरफ़ेस (यूआई) के आधार पर, मीडिया क्वेरी की मदद से, एचटीएमएल को बदले बिना अपने ऐप्लिकेशन के दिखने के तरीके में काफ़ी बड़े बदलाव किए जा सकते हैं.

साफ़ और बेहतर इमेज

अलग-अलग स्क्रीन साइज़ और डेंसिटी की वजह से, इमेज को भी चुनौतियों का सामना करना पड़ता है. छोटी इमेज के लिए कम मेमोरी की ज़रूरत होती है और वे तेज़ी से लोड होती हैं. हालांकि, इन्हें बड़ा करने पर वे धुंधली हो जाती हैं.

यहां कुछ सलाह और तरकीबें दी गई हैं, जिनकी मदद से यह पक्का किया जा सकता है कि आपकी इमेज किसी भी स्क्रीन पर साफ़ और बेहतर दिखें:

• स्केलेबल इफ़ेक्ट के लिए सीएसएस का इस्तेमाल करें.
• वेक्टर ग्राफ़िक का इस्तेमाल करें.
• हाई रिज़ॉल्यूशन वाली फ़ोटो दें.

स्केलेबल इफ़ेक्ट के लिए सीएसएस का इस्तेमाल करना

जब भी हो सके, इमेज के बजाय सीएसएस का इस्तेमाल करें. ऐसा हो सकता है कि सीएसएस प्रॉपर्टी के कुछ कॉम्बिनेशन को रेंडर करने में ज़्यादा समय लगे. हमेशा उन खास कॉम्बिनेशन की जांच करें जिनका इस्तेमाल किया जा रहा है.

फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) के बारे में ज़्यादा जानें. यह मेट्रिक, उपयोगकर्ता के पेज पर पहली बार जाने से लेकर, स्क्रीन पर उसके कॉन्टेंट को रेंडर करने में लगने वाले समय को मेज़र करती है. "कॉन्टेंट" से टेक्स्ट, इमेज (इसमें बैकग्राउंड इमेज भी शामिल हैं), <svg> एलिमेंट, और सफ़ेद रंग के अलावा किसी और रंग के <canvas> एलिमेंट का मतलब है.

वेक्टर ग्राफ़िक का इस्तेमाल करें

स्केलेबल वेक्टर ग्राफ़िक्स (SVGs), स्केल की जा सकने वाली इमेज उपलब्ध कराने का एक बेहतरीन तरीका है. वेक्टर ग्राफ़िक के लिए सही इमेज के लिए, SVG बहुत कम फ़ाइल साइज़ वाली अच्छी क्वालिटी की इमेज उपलब्ध कराता है.

हाई रिज़ॉल्यूशन वाली फ़ोटो सबमिट करना

हाई डीपीआई वाले डिवाइस के लिए सही फ़ोटो का इस्तेमाल करें और सीएसएस का इस्तेमाल करके इमेज को स्केल करें. इस तरह, इमेज सभी डिवाइसों पर अच्छी क्वालिटी में रेंडर हो सकती है. इमेज जनरेट करते समय, ज़्यादा कंप्रेस (कम क्वालिटी की सेटिंग) का इस्तेमाल करने पर, आपको फ़ाइल के सही साइज़ के साथ अच्छे विज़ुअल नतीजे मिल सकते हैं.

इस तरीके के कुछ नुकसान हो सकते हैं: ज़्यादा कॉम्प्रेस की गई इमेज में कुछ विज़ुअल आर्टफ़ैक्ट दिख सकते हैं. इसलिए, आपको यह तय करने के लिए एक्सपेरिमेंट करना होगा कि आपको कॉम्प्रेस करने का कौनसा लेवल स्वीकार है. साथ ही, सीएसएस में इमेज का साइज़ बदलना महंगा हो सकता है.

अगर ज़्यादा कंप्रेस करने की सुविधा आपकी ज़रूरतों के हिसाब से नहीं है, तो WebP फ़ॉर्मैट का इस्तेमाल करें. इससे, कम फ़ाइल साइज़ में अच्छी क्वालिटी वाली इमेज मिलती है. Android के उन वर्शन के लिए फ़ॉलबैक उपलब्ध कराना न भूलें जिन पर WebP काम नहीं करता.

ज़्यादा कंट्रोल

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

इमेज लोड होने का तरीका कंट्रोल करने के लिए, JavaScript का इस्तेमाल किया जा सकता है. हालांकि, इससे प्रोसेस ज़्यादा जटिल हो जाती है.

मीडिया क्वेरी और स्क्रीन की सघनता

स्क्रीन डेंसिटी के आधार पर कोई इमेज चुनने के लिए, आपको अपनी मीडिया क्वेरी में dpi या dppx यूनिट का इस्तेमाल करना होगा. dpi यूनिट, हर सीएसएस इंच में मौजूद बिंदुओं की संख्या दिखाती है और dppx यूनिट, हर सीएसएस पिक्सल में मौजूद बिंदुओं की संख्या दिखाती है.

नीचे दी गई टेबल में, dpi और dppx के बीच का संबंध देखा जा सकता है.

सामान्य स्क्रीन डेंसिटी बकेट, Android तय करता है. इनका इस्तेमाल, स्क्रीन डेंसिटी बताने के लिए दूसरी जगहों पर किया जाता है. उदाहरण के लिए, https://screensiz.es.

बैकग्राउंड की इमेज

एलिमेंट में बैकग्राउंड इमेज असाइन करने के लिए, मीडिया क्वेरी का इस्तेमाल किया जा सकता है. उदाहरण के लिए, अगर आपके पास 256 पिक्सल x 256 पिक्सल साइज़ की लोगो इमेज है और डिवाइस का पिक्सल रेशियो 1.0 है, तो इन सीएसएस नियमों का इस्तेमाल किया जा सकता है:

.welcome-header > h1 {
  flex: 1;

  width: 100%;

  max-height: 256px;
  max-width: 256px;

  background-image: url('../images/html5_256x256.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

डिवाइस के पिक्सल रेशियो 1.5 (hdpi) और 2.0 (xhdpi) वाले डिवाइसों पर, इस इमेज को बड़ी इमेज से बदलने के लिए, ये नियम जोड़े जा सकते हैं:

@media screen and (min-resolution: 1.5dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_384x384.png');
  }
}

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

इसके बाद, इस तकनीक को min-width जैसी अन्य मीडिया क्वेरी के साथ मर्ज किया जा सकता है. यह तब काम आता है, जब अलग-अलग फ़ॉर्म फ़ैक्टर का ध्यान रखा जाता है.

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
  .welcome-header > h1{
    background-image: url('../images/html5_1024x1024.png');

    max-height: 512px;
    max-width: 512px;
  }
}

आपको यह दिख सकता है कि max-height और max-width, 2ddpx रिज़ॉल्यूशन के लिए 512 पिक्सल पर सेट हैं. साथ ही, इमेज का साइज़ 1024x1024 पिक्सल है. ऐसा इसलिए है, क्योंकि सीएसएस "पिक्सल", डिवाइस पिक्सल रेशियो (512 पिक्सल * 2 = 1024 पिक्सल) को ध्यान में रखता है.

<img/> के बारे में क्या?

फ़िलहाल, वेब पर इस समस्या का कोई समाधान नहीं है. कुछ सुझाव हैं, लेकिन वे मौजूदा ब्राउज़र या वेबव्यू में उपलब्ध नहीं हैं.

इस बीच, अगर आपने JavaScript में अपना DOM जनरेट किया है, तो बेहतर डायरेक्ट्री स्ट्रक्चर में कई इमेज रिसॉर्स बनाए जा सकते हैं:

images/
  mdpi/
    imagename.png
  hdpi/
    imagename.png
  xhdpi/
    imagename.png

इसके बाद, सबसे सही इमेज पाने के लिए पिक्सल रेशियो का इस्तेमाल करें:

function getDensityDirectoryName() {
  if(!window.devicePixelRatio) {
    return 'mdpi';
  }

  if(window.devicePixelRatio > 1.5) {
    return 'xhdpi';
  } else if(window.devicePixelRatio > 1.0) {
    return 'hdpi';
  }

  return 'mdpi';
}

इसके अलावा, इमेज के लिए रिलेटिव यूआरएल तय करने के लिए, पेज के बेस यूआरएल में बदलाव किया जा सकता है.

<!doctype html>
<html class="no-js">
<head>
  <script>
    function getDensityDirectoryName() {
      if(!window.devicePixelRatio) {
          return 'mdpi';
      }

      if(window.devicePixelRatio > 1.5) {
          return 'xhdpi';
      } else if(window.devicePixelRatio > 1.0) {
          return 'hdpi';
      }

      return 'mdpi';
    }

    var baseUrl =
        'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
    document.write('<base href="'+baseUrl+'">');
  </script>

    ...
</head>
<body>
    ...
</body>
</html>

इस तरीके से पेज लोड होने से रोका जाता है. साथ ही, इमेज, स्क्रिप्ट, और सीएसएस फ़ाइलों जैसे सभी रिसॉर्स के लिए, सही पाथ का इस्तेमाल करने के लिए मजबूर किया जाता है. ऐसा इसलिए होता है, क्योंकि बेस यूआरएल, घनत्व पर आधारित डायरेक्ट्री पर ले जाता है.