วิธีการเปลี่ยนสีของแถบส่วนหัวและแถบที่อยู่ใน Chrome รุ่นใหม่ล่าสุดบน Lollipop

578

ยังไม่พบอะไรเลยในหัวข้อนี้ ฉันชอบความสามารถในการเปลี่ยนสีของแถบที่อยู่และสีส่วนหัวของภาพรวมหรือไม่ มีวิธีง่าย ๆ ในการทำเช่นนี้?

Chrome สำหรับ Android ป้อนคำอธิบายรูปภาพที่นี่ .

ฉันคิดว่าคุณต้องใช้ Android 5.0 Lollipop สำหรับการทำงานและของ Chrome ผสานแท็บและปพลิเคชันชุดบน

android html google-chrome

— Arpad Gabor
แหล่งที่มา

ตั้งแต่เดือนมกราคม 2559 ตัวเลือกการรวมแท็บไม่จำเป็นสำหรับการทำงาน (ใน Lollipop) อีกต่อไป

— Skuld

1

นอกจากนี้ยังเป็นเช่นนี้สำหรับ KitKat ในตอนนี้ ..

— Revetahw พูดว่า Reinstate Monica

@Skuld คุณต้องรวมแท็บเพื่อดูสีในมุมมอง "แอปล่าสุด" แต่แม้ว่าคุณจะปิดการใช้งาน "ผสานแท็บและแอพ" คุณยังสามารถเห็นสีเมื่อดูเว็บไซต์ใน Chrome แต่ฉันหวังว่าพวกเขาจะแก้ไขมันในบางวันเพื่อให้รายการแท็บใน Chrome (แสดงเมื่อปิดการใช้งาน "ผสานแท็บและแอพ") จะแสดงสีของธีมแทนสีเทาหม่น

— ADTC

1

@ADTC คุณกำลังพูดถึงเมื่อคุณไปเปลี่ยนแท็บมันสูญเสียสี? ถ้าเป็นเช่นนั้นใช่มันไม่เหมาะ แต่ไม่เป็นเรื่องใหญ่เพราะมันจะได้สีเมื่อคุณคลิกที่แท็บ สิ่งที่สำคัญก็คือว่าเว็บไซต์ที่เมื่อดูมีสีที่ถูกต้อง :)

— Skuld

1

@Skuld กับ "ผสานแท็บและปพลิเคชัน" หันออกคุณจะได้รับมุมมองนี้ (ลิงค์)เมื่อคุณสลับแท็บ ในมุมมองนี้แท็บทั้งหมดเป็นเพียงสีเทา มันจะดีถ้าสีของชุดรูปแบบยังคงอยู่ในมุมมองนี้ คล้ายกับวิธีการที่ app "เหมือนแท็บ" มีชุดรูปแบบสีเมื่อ "ผสานแท็บและปพลิเคชัน" ถูกเปิดบนและคุณเปิดสลับแอป (PS: ส่วนตัวผมเกลียดการผสานเพราะฉันมีจำนวนมากของแท็บและจากนั้นฉันมีจำนวนมากของปพลิเคชันเกินไปฉันต้องการที่จะให้พวกเขาแยกหรือจะให้ฉันไปบ้า. >.< )

— ADTC

790

ค้นพบวิธีแก้ปัญหาหลังจากค้นหาบางอย่าง

คุณต้องเพิ่ม<meta>แท็กใน<head>ที่name="theme-color"มีของคุณด้วยรหัส HEX ของคุณเป็นค่าเนื้อหา ตัวอย่างเช่น:

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

— Arpad Gabor
แหล่งที่มา

19

ขอบคุณ ชำระเงินด้วย html5rocks สำหรับข้อมูลเพิ่มเติม: updates.html5rocks.com/2014/11/…

— redochka

4

Chrome มีการตั้งค่าใด ๆ หรือไม่ ฉันไม่สามารถยืนแถบที่อยู่ที่มีสีได้ ฉันแค่ต้องการสีเริ่มต้น

— James

@James - นี่อาจไม่ใช่การแก้ไขที่คุณชอบ แต่คุณสามารถหยุดการเปลี่ยนสีได้โดยปิดการตั้งค่า 'ผสานแท็บด้วยแอป'

— Novocaine

4

จริงๆ? ฉันกำลังใช้ Marshmallow โดยปิดการตั้งค่า 'รวมแท็บด้วยแอป' แต่แถบที่อยู่ยังคงเป็นสี บางทีพวกเขา 'แก้ไขข้อผิดพลาด'

— user711413

3

ไม่จำเป็นต้องเป็นสีฐานสิบหกสี CSS ที่ถูกต้องจะทำงานได้

— Bogdan M.

500

คุณต้องมี 3 metaแท็กเพื่อรองรับ Android, iPhone และ Windows Phone

<!-- 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">

— Edoardo L'Astorina
แหล่งที่มา

แล้วแถบโหลดล่ะ? อย่างที่ฉันเคยเห็นเว็บไซต์ที่ทำให้แถบด้านบนมืดและโหลดแถบสีขาว แต่ฉันไม่สามารถหาตัวอย่างโค้ดวิเคราะห์?

— Newbie

19

หมายเหตุ : ตามบันทึกย่อ dev ของ Apple : "เมตาแท็กนี้ไม่มีผลเว้นแต่คุณจะระบุโหมดเต็มหน้าจอตามที่อธิบายไว้apple-apple-mobile-web-app-capableก่อน"

— Yan Foto

@ YanFoto ที่จริงแล้วเป็นข้อมูลที่มีประโยชน์มาก เราจะทำอย่างนั้นได้อย่างไร?

— viriato

44

สำหรับ iOS apple-mobile-web-app-status-bar-styleแอตทริบิวต์สนับสนุนเฉพาะblack, black-translucent or default` - คุณไม่สามารถใช้สีที่กำหนดเอง

— sixones

2

ถ้าคุณใช้black-translucentมันจะทำให้แถบด้านบนโปร่งใสด้วยข้อความสีขาวซึ่งอาจเป็นสิ่งที่คุณจะตามมา

— 99 ปัญหา - ไวยากรณ์ไม่ใช่หนึ่ง

93

ตัวอย่างเช่นการตั้งค่าพื้นหลังเป็นสีที่คุณชื่นชอบ / การสร้างแบรนด์

เพิ่มคุณสมบัติ Metaด้านล่างลงในโค้ด HTML ของคุณในส่วนHEAD

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

ตัวอย่าง

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

ในภาพด้านล่างฉันเพิ่งพูดถึงวิธี Chrome นำคุณสมบัติชุดรูปแบบสีของคุณ

Firefox OS, Safari, Internet Explorer และ Opera Coast ช่วยให้คุณกำหนดสีสำหรับองค์ประกอบของเบราว์เซอร์และแม้แต่แพลตฟอร์มที่ใช้เมตาแท็ก

<!-- 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">

สไตล์เฉพาะของ Safari

จากเอกสารแนวทางที่นี่

ซ่อนส่วนประกอบส่วนต่อประสานผู้ใช้ Safari

ตั้งเมตาแท็กที่สามารถใช้งานกับแอปเปิ้ลมือถือและเว็บเป็นใช่เพื่อเปิดโหมดสแตนด์อโลน ตัวอย่างเช่น HTML ต่อไปนี้แสดงเนื้อหาเว็บโดยใช้โหมดสแตนด์อโลน

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

การเปลี่ยนลักษณะแถบสถานะ

คุณสามารถเปลี่ยนลักษณะที่ปรากฏของแถบสถานะเริ่มต้นเป็นสีดำหรือสีดำโปร่งแสง ด้วยแถบโปร่งแสงสีดำแถบสถานะจะลอยอยู่ด้านบนของเนื้อหาแบบเต็มหน้าจอแทนที่จะกดลง สิ่งนี้ทำให้เค้าโครงมีความสูงเพิ่มขึ้น แต่ขัดขวางด้านบน นี่คือรหัสที่ต้องการ:

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับลักษณะแถบสถานะโปรดดู apple-mobile-web-app-status-bar-style

ตัวอย่างเช่น:

สกรีนช็อตโดยใช้โปร่งแสงสีดำ

สกรีนช็อตโดยใช้สีดำ

— Ravi Delixan
แหล่งที่มา

42

จากเอกสารอย่างเป็นทางการ ,

ตัวอย่างเช่นการตั้งค่าสีพื้นหลังเป็นสีส้ม:

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

นอกจากนี้ Chrome จะแสดง favicons ความละเอียดสูงที่สวยงามเมื่อมีให้ Chrome สำหรับ Android เลือกไอคอนความละเอียดสูงสุดที่คุณให้ไว้และเราขอแนะนำให้ระบุไฟล์ PNG 192 × 192px ตัวอย่างเช่น:

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

— Deval Khandelwal
แหล่งที่มา

22

นี่เป็นเช่นเดียวกับคำตอบเดิมนอกเหนือจากการเพิ่มข้อมูลที่ไม่เกี่ยวข้อง

— igorsantos07

9

@ igorsantos07 ฉันแค่ต้องการเพิ่มลิงค์ไปยังเอกสารอย่างเป็นทางการ แค่นั้นแหละ

— Deval Khandelwal

4

ฉันคิดว่าลิงก์ไปยังเอกสารเป็นสิ่งที่ขาดหายไปจากคำตอบที่เลือก นั่นคือสิ่งที่ฉันไปเที่ยวเมื่อฉันลงเอยที่นี่ ขอบคุณ.

— Justin Force

นี่คือการซ้ำซ้อน

— taimur alam