मॉडर्न ब्राउज़र की मदद से आइकॉन, पता बार के रंग जैसे कुछ कॉम्पोनेंट को अपनी पसंद के मुताबिक बनाया जा सकता है. साथ ही, यहां तक कि कस्टम टाइल जैसी चीज़ें भी जोड़ी जा सकती हैं. इन आसान बदलावों से उपयोगकर्ताओं की दिलचस्पी बढ़ सकती है और वे आपकी साइट पर वापस आ सकते हैं.
मॉडर्न ब्राउज़र की मदद से आइकॉन, पता बार के रंग जैसे कुछ कॉम्पोनेंट को अपनी पसंद के मुताबिक बनाया जा सकता है. साथ ही, यहां तक कि कस्टम टाइल जैसी चीज़ें भी जोड़ी जा सकती हैं. इन आसान बदलावों से उपयोगकर्ताओं की दिलचस्पी बढ़ सकती है और वे आपकी साइट पर वापस आ सकते हैं.
शानदार आइकॉन और टाइल उपलब्ध कराएं
जब कोई उपयोगकर्ता आपके वेबपेज पर आता है, तो ब्राउज़र एचटीएमएल से आइकॉन को फ़ेच करने की कोशिश करता है. यह आइकॉन कई जगहों पर दिख सकता है. इनमें ब्राउज़र टैब, हाल ही में इस्तेमाल किए गए ऐप्लिकेशन स्विच, नया (या हाल ही में विज़िट किया गया) टैब पेज वगैरह शामिल हैं.
अच्छी क्वालिटी की इमेज देने से, आपकी साइट आसानी से जानी-पहचानी हो जाएगी, जिससे वह अपनी साइट पर ताकि उपयोगकर्ता आपकी साइट को आसानी से ढूंढ सकें.
सभी ब्राउज़र पर पूरी तरह से काम करने के लिए, आपको <head> में कुछ टैग जोड़ने होंगे
प्रत्येक पृष्ठ के तत्व के साथ आता है.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome और Opera
Chrome और Opera icon.png का इस्तेमाल करते हैं, जिसे इसके आकार के हिसाब से स्केल किया जाता है
डिवाइस. अपने-आप स्केल होने से रोकने के लिए,
साइज़ के लिए, sizes एट्रिब्यूट तय करें.
Safari
Safari, rel एट्रिब्यूट के साथ <link> टैग का भी इस्तेमाल करता है: apple-touch-icon से
होम स्क्रीन का आइकॉन दिखाता है.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
'Apple-टच-आइकॉन' के लिए, 180 पिक्सल या 192 पिक्सल स्क्वेयर का नॉन-पारदर्शी PNG सबसे अच्छा होता है.
sizes एट्रिब्यूट के ज़रिए एक से ज़्यादा वर्शन शामिल करने का सुझाव नहीं दिया जाता है.
पहले, iOS के लिए Safari -precomposed कीवर्ड से बचने के लिए
विज़ुअल इफ़ेक्ट जोड़ने हैं, लेकिन iOS 7 के बाद से, इसकी ज़रूरत नहीं है.
Internet Explorer और Windows Phone
Windows 8 के नए होम स्क्रीन अनुभव के साथ, होम स्क्रीन पर दिखने वाले चार अलग-अलग लेआउट पिन की गई साइटें, चार आइकॉन की ज़रूरत होती है. आप प्रासंगिक मेटा को छोड़ सकते हैं टैग का उपयोग करें.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Internet Explorer में टाइल
Microsoft की "पिन की गई साइटें" और "लाइव टाइल" को घुमाते रहें दूसरों से कहीं बेहतर हैं लागू किया है और वे इस गाइड के दायरे से परे हैं. इसके बारे में ज़्यादा जानने पर लाइव टाइल बनाने का तरीका जानें.
ब्राउज़र के एलिमेंट में रंग
अलग-अलग meta एलिमेंट का इस्तेमाल करके, ब्राउज़र और
की ज़रूरतों को भी पूरा करते हैं. ध्यान रखें कि हो सकता है कि कुछ सेवाएं सिर्फ़ कुछ खास
प्लैटफ़ॉर्म या ब्राउज़र इस्तेमाल कर सकते हैं, लेकिन वे अनुभव को काफ़ी बेहतर बना सकते हैं.
Chrome, Firefox OS, Safari, Internet Explorer, और Opera कोस्ट की मदद से रंग, और यहां तक कि मेटा टैग का इस्तेमाल करने वाले प्लैटफ़ॉर्म के लिए भी कर सकते हैं.
Chrome और Opera के लिए मेटा थीम रंग
Android पर Chrome के लिए थीम का रंग तय करने के लिए, मेटा थीम के रंग का इस्तेमाल करें.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari के लिए खास स्टाइल
Safari की मदद से, स्टेटस बार को स्टाइल किया जा सकता है. साथ ही, स्टार्टअप इमेज तय की जा सकती है.
स्टार्टअप इमेज के बारे में बताएं
डिफ़ॉल्ट रूप से, Safari लोड अवधि के दौरान और एक से ज़्यादा समय के बाद एक खाली स्क्रीन दिखाता है
ऐप्लिकेशन की पिछली स्थिति का स्क्रीनशॉट लोड करता है. इससे बचने के लिए ये काम करें
साथ ही, लिंक टैग जोड़कर Safari को एक स्पष्ट स्टार्टअप इमेज दिखाने के लिए,
rel=apple-touch-startup-image. उदाहरण के लिए:
<link rel="apple-touch-startup-image" href="icon.png">
इमेज, टारगेट किए गए डिवाइस की स्क्रीन के साइज़ में होनी चाहिए या इस्तेमाल नहीं किया जाएगा. इससे संदर्भ लें Safari वेब कॉन्टेंट के लिए दिशा-निर्देश देखें.
हालांकि, Apple के दस्तावेज़ में इस विषय के बारे में कम जानकारी दी गई है, लेकिन डेवलपर कम्यूनिटी ने सभी डिवाइसों को टारगेट करने का तरीका ढूंढ लिया है. इसके लिए, यह बेहतर मीडिया क्वेरी का इस्तेमाल करता है सही डिवाइस चुनें और फिर सही इमेज डालें. यहाँ है tfausak's gist के सौजन्य से, काम करने का तरीका
स्टेटस बार के दिखने का तरीका बदलना
डिफ़ॉल्ट स्टेटस बार को black या
black-translucent. black-translucent के साथ, स्टेटस बार सबसे ऊपर दिखता है
पूरी स्क्रीन पर ज़रूरी कॉन्टेंट दिखेगा. यह लेआउट
अधिक ऊंचाई तक बढ़ जाती है, लेकिन शीर्ष को बाधित करती है. यहां यह ज़रूरी कोड दिया गया है:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent का इस्तेमाल करके स्क्रीनशॉट लें
black का इस्तेमाल करके स्क्रीनशॉट लें