लॉलीपॉप पर नवीनतम क्रोम संस्करण में हेडर बार और एड्रेस बार का रंग कैसे बदलें?

578

अभी तक इस विषय पर कुछ भी नहीं मिला है। मुझे वास्तव में ओवरव्यू पर एड्रेस बार और हेडर का रंग बदलने की क्षमता पसंद है? क्या ऐसा करने का कोई आसान तरीका है?

Android के लिए क्रोम यहाँ छवि विवरण दर्ज करें ।

मुझे लगता है कि इसके लिए काम करने के लिए आपको एंड्रॉइड 5.0 लॉलीपॉप की आवश्यकता है, और क्रोम के मर्ज टैब और ऐप्स ऑन पर सेट हैं ।

android html google-chrome

— अर्पद गाबोर
स्रोत

जनवरी 2016 तक मर्ज टैब विकल्प को काम करने के लिए (लॉलीपॉप में) की आवश्यकता नहीं है।

— स्कुलड

1

यह किटकैट के लिए भी अब ऐसा ही है ..

— रेवेटहॉव ने कहा कि मोनिका

@Skuld आपको "हाल के ऐप्स" दृश्य में रंग देखने के लिए मर्ज टैब की आवश्यकता है, लेकिन भले ही आपने "मर्ज टैब और ऐप्स" अक्षम कर दिए हों, फिर भी आप क्रोम में वेबसाइट देखते समय रंग देख सकते हैं। लेकिन मुझे उम्मीद है कि वे इसे किसी दिन ठीक कर लेंगे, ताकि क्रोम के अंदर की टैब सूची (जब "मर्ज टैब और ऐप्स अक्षम हो" दिखाई जाए) भी सुस्त ग्रे के बजाय थीम रंग प्रदर्शित करेगा।

— ADTC

1

@ADTC क्या आप बात कर रहे हैं जब आप स्विच टैब पर जाते हैं तो यह रंग खो देता है? यदि हां, तो यह आदर्श नहीं है, लेकिन वास्तव में यह एक बड़ी बात नहीं है क्योंकि जब आप टैब पर क्लिक करते हैं तो यह रंग को पुन: प्राप्त करता है। बड़ी बात यह है कि जब वेबसाइट देखी जाती है तो उसका रंग सही होता है :)

— Skuld

1

@Skuld, "मर्ज टैब और ऐप्स" बंद होने के बाद , आपको टैब स्विच करने पर यह दृश्य (लिंक) मिलता है । इस दृष्टि से, सभी टैब केवल ग्रे हैं। अच्छा होगा यदि थीम का रंग इस दृष्टि से बना रहे। "मर्ज टैब्स एंड एप्स" चालू होने पर "ऐप-लाइक टैब" का विषय रंग जैसा होता है और आप ऐप स्विचर खोलते हैं। (PS: व्यक्तिगत रूप से मुझे विलय से नफरत है क्योंकि मेरे पास बहुत सारे टैब हैं, और फिर मेरे पास बहुत सारे ऐप हैं। मैं उन्हें अलग रखना चाहता हूं या मैं पागल हो जाऊंगा >.< )

— ADTC

790

कुछ खोजने के बाद समाधान मिला।

आपको सामग्री मूल्य के रूप में अपने HEX कोड के साथ अपने युक्त <meta>में एक टैग जोड़ने की आवश्यकता है । उदाहरण के लिए:<head>name="theme-color"

<meta name="theme-color" content="#999999" />

— अर्पद गाबोर
स्रोत

19

धन्यवाद। अधिक जानकारी के लिए Checkout भी html5rocks: updates.html5rocks.com/2014/11/…

— redochka

4

क्या इसे अक्षम करने के लिए Chrome में कोई सेटिंग है? मैं रंगीन पता पट्टी नहीं खड़ा कर सकता। मुझे बस डिफ़ॉल्ट रंग चाहिए।

— जेम्स

@ नाम - यह आप की तरह एक फिक्स नहीं हो सकता है, लेकिन आप एप्स की सेटिंग के साथ 'मर्ज टैब' को बंद करके रंग परिवर्तन को रोक सकते हैं।

— नोवोकेन

4

वास्तव में? मैं मार्शमैलो का उपयोग कर रहा हूं, जिसमें 'मर्ज टैब विद ऐप्स' सेटिंग बंद है, लेकिन एड्रेस बार अभी भी रंगीन है। हो सकता है कि उन्होंने 'बग फिक्स' कर दिया हो।

— user711413

3

जरूरी नहीं कि एक हेक्स रंग होना चाहिए, कोई भी वैध सीएसएस रंग काम करेगा।

— बोगदान एम।

498

metaएंड्रॉइड, आईफोन और विंडोज फोन का समर्थन करने के लिए आपको वास्तव में 3 टैग की आवश्यकता है

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

— एडोर्डो एल'अस्टोरिना
स्रोत

और लोडिंग बार के बारे में क्या? जैसा कि मैंने उन वेबसाइटों को देखा है जो शीर्ष बार को अंधेरे और लोडिंग बार को सफेद बनाता है, लेकिन मुझे कोड की घोषणा करने वाला स्निपेट नहीं मिल रहा है?

— नौसिखिया

19

नोट : एप्पल के देव नोट्स के अनुसार : "इस मेटा टैग का तब तक कोई प्रभाव नहीं पड़ता है जब तक कि आप पहले वर्णित पूर्ण-स्क्रीन मोड को निर्दिष्ट नहीं करते हैं apple-apple-mobile-web-app-capable।"

— यान फोटो

@YanFoto जो वास्तव में बहुत उपयोगी जानकारी है। कोई ऐसा कैसे करेगा?

— विराटो

44

IOS apple-mobile-web-app-status-bar-styleविशेषता केवल समर्थन करती है black, black-translucent or डिफ़ॉल्ट '- आप एक कस्टम रंग का उपयोग नहीं कर सकते।

— छः

2

यदि आप इसका उपयोग करते हैं black-translucentतो सफेद पट्टी के साथ शीर्ष पट्टी को पारदर्शी बना देगा जो संभवतः आपके बाद होगा

— 99 समस्याएं - सिंटेक्स एक

93

उदाहरण के लिए, पृष्ठभूमि को अपने पसंदीदा / ब्रांडिंग रंग में सेट करने के लिए

HEAD सेक्शन में अपने HTML कोड के नीचे मेटा प्रॉपर्टी जोड़ें

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

उदाहरण

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

नीचे की छवि में, मैंने अभी उल्लेख किया है कि कैसे क्रोम ने आपकी थीम-रंग की संपत्ति ली है

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

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

सफ़ारी विशिष्ट स्टाइल

दिशानिर्देशों से यहां दस्तावेज

सफारी यूजर इंटरफेस घटक छुपा

स्टैंडअलोन मोड चालू करने के लिए ऐप्पल-मोबाइल-वेब-ऐप-सक्षम मेटा टैग को हां पर सेट करें। उदाहरण के लिए, निम्न HTML स्टैंडअलोन मोड का उपयोग करके वेब सामग्री प्रदर्शित करता है।

<meta name="apple-mobile-web-app-capable" content="yes">

स्थिति बार सूरत बदलना

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

<meta name="apple-mobile-web-app-status-bar-style" content="black">

स्टेटस बार उपस्थिति पर अधिक जानकारी के लिए, ऐप्पल-मोबाइल-वेब-ऐप-स्टेटस-बार-स्टाइल देखें।

उदाहरण के लिए:

ब्लैक-ट्रांसलूसेंट का उपयोग कर स्क्रीनशॉट

काले रंग का उपयोग कर स्क्रीनशॉट

— रवि डेलिकन
स्रोत

42

से आधिकारिक प्रलेखन ,

उदाहरण के लिए, नारंगी को पृष्ठभूमि रंग सेट करने के लिए:

<meta name="theme-color" content="#db5945">

इसके अलावा, जब वे प्रदान किए जाते हैं तो Chrome सुंदर उच्च-रिज़ल्ट फ़ेविकॉन दिखाएगा। Android के लिए Chrome आपके द्वारा प्रदत्त उच्चतम रेस आइकन को चुनता है, और हम 192 × 192px PNG फ़ाइल प्रदान करने की सलाह देते हैं। उदाहरण के लिए:

<link rel="icon" sizes="192x192" href="nice-highres.png">

— देवल खंडेलवाल
स्रोत

22

यह असंबंधित जानकारी जोड़ने के अलावा मूल उत्तर के समान है

— igorsantos07

9

@ igorsantos07 मैं सिर्फ आधिकारिक डॉक्स से लिंक जोड़ना चाहता था। वह यह है

— देवल खंडेलवाल

4

मैंने सोचा था कि प्रलेखन का एक लिंक ठीक वही है जो चयनित उत्तर से गायब था। यही कारण है कि जब मैं यहाँ समाप्त हुआ था, तब मैं गुगली कर रहा था। धन्यवाद।

— जस्टिन फोर्स

यह बेमानी है

— तैमूर आलम