Đồng bộ màu website với thanh công cụ Chrome

4 Likes Bình luận
Đồng bộ màu thanh công cụ trình duyệt Chrome trên Android 5.0 – Ảnh: bangnguyen.net

Khi sử dụng Chrome trên android 5.0, bạn sẽ thấy thanh công cụ có màu sắc đồng bộ với trang web. Vậy làm thế nào để đồng bộ màu thanh công cụ Chrome với website của bạn? Bài viết sau sẽ hướng dẫn bạn thao tác chỉ với một dòng code.

Đồng bộ màu thanh công cụ trình duyệt Chrome trên Android 5.0 – Ảnh: bangnguyen.net Đồng bộ màu thanh công cụ trình duyệt Chrome trên Android 5.0 – Ảnh: bangnguyen.net

Kể từ phiên bản Chrome 39 trở đi, trình duyệt này chính thức hỗ trợ việc thay đổi màu sắc thanh công cụ và đưa từng tab trình duyệt lên màn hình ứng dụng đang chạy (hay Recent apps). Việc đồng bộ màu sẽ khiến website của bạn trở nên bắt mắt và hiện đại hơn!

Việc định màu sắc cho trang web hết sức đơn giản, bạn chỉ cần thêm thẻ theme-color vào trong thẻ <head>. Đối với những bạn dùng WordPress, bạn thêm thẻ này vào file header.php:

 

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

Ngoài ra, bạn có thể thêm icon cho website của bạn, kích thước chuẩn cho các loại màn hình hiện tại là 192×192, định dạng file PNG. Các bạn chỉ cần thêm đường dẫn của hình ảnh vào trong thẻ head:

<link rel="icon" sizes="192x192" href="đường_dẫn_hình_ảnh.png">

Đối với trình duyệt Safari cho iOS, bạn cần định rõ icon cho từng loại màn hình:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Chúc các bạn thành công!

Bạn cũng sẽ thích

Bằng Nguyễn

Bạn muốn tìm kênh đầu tư bền vững lâu dài và an toàn? Hãy mời tôi một ly cà phê và tôi sẽ chia sẻ cho bạn. Liên hệ tại đây

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *