Skip links

Mẹo thay đổi màu của thanh địa chỉ trên trình duyệt mobile

Bạn có nhận thấy rằng rất nhiều Website của các thương hiệu lớn như Facebook, Youtube… sử dụng màu sắc thương hiệu riêng của họ cho thanh địa chỉ trong trình duyệt trên thiết bị di động. Bài viết này tôi sẽ chỉ cho bạn thấy một mẹo rất đơn giản để thay đổi màu của thanh địa chỉ theo logo của bạn.

Tại sao lại thay đổi màu của thanh địa chỉ trên trình duyệt di động?

Hầu hết các Website hiện đại đều đáp ứng giao diện dành cho di động (Responsive), giúp người dùng cảm thấy nhẹ nhõm khi lướt web thay vì mọi thứ đều dàn hàng ngang và bị che khuất đi. Tuy nhiên, nó vẫn cho họ cảm giác như một trang web “bình thường“.

Thay đổi màu của thanh địa chỉ mang lại cảm giác giống như sử dụng các ứng dụng khác trong khi vẫn đang thực sự lướt web. Điều này cải thiện trải nghiệm người dùng một cách đáng kể, và cuối cùng giúp tăng doanh thu cũng như tỷ lệ chuyển đổi.

Không những vậy nhận diện thương hiệu thông qua màu sắc là một phần rất quan trọng. Bời vì màu sắc của thương hiệu truyền cảm hứng và ảnh hướng rất lớn đối với tâm lý khách hàng.

Thay đổi màu của thanh địa bằng thẻ Meta

Chỉ cần thêm mã thẻ Meta này ngay trước thẻ đóng </head> trong b65 source code Website của bạn: 

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

Thẻ Meta này được Google Chrome trên di động dùng để nhận dạng mã màu và thay đổi màu của thanh địa chỉ trong quá trình duyệt web. Thay đổi #ff6600 thành mã màu của bạn (mã HEX).

⭐ Lưu ý rằng, mã này chỉ hoạt động cho trình duyệt web Google Chrome trên các thiết bị Android sử dụng Lollipop hoặc các phiên bản mới hơn.

Cách lấy mã màu HEX

Sử dụng công cụ sau để chọn mã màu phù hợp với logo của bạn: HTML color picker.

Bình luận

Chat qua Facebook Chat qua Viber Chat qua Whatapp Chat qua Zalo Nhắn tin SMS Gọi cho chuyên viên CSKH Gửi mail cho CSKH Chỉ đường đi