Biểu tượng và màu trình duyệt

Các trình duyệt hiện đại giúp bạn dễ dàng tuỳ chỉnh một số thành phần nhất định, chẳng hạn như biểu tượng, màu thanh địa chỉ và thậm chí là thêm những thành phần như ô tuỳ chỉnh. Những điều chỉnh đơn giản này có thể tăng mức độ tương tác và đưa người dùng quay lại trang web của bạn.

Paul Bakaus

Các trình duyệt hiện đại giúp bạn dễ dàng tuỳ chỉnh một số thành phần nhất định, chẳng hạn như biểu tượng, màu thanh địa chỉ và thậm chí là thêm những thành phần như ô tuỳ chỉnh. Những điều chỉnh đơn giản này có thể tăng mức độ tương tác và thu hút người dùng quay lại trang web của bạn.

Cung cấp các biểu tượng và thẻ thông tin chất lượng cao

Khi người dùng truy cập vào trang web của bạn, trình duyệt sẽ cố gắng tìm nạp một biểu tượng từ HTML. Biểu tượng này có thể xuất hiện ở nhiều nơi, bao gồm cả thẻ trình duyệt, trình chuyển đổi ứng dụng gần đây, trang thẻ mới (hoặc trang thẻ đã truy cập gần đây) và nhiều nơi khác.

Việc cung cấp hình ảnh chất lượng cao sẽ giúp trang web của bạn dễ nhận biết hơn, giúp người dùng dễ dàng tìm thấy trang web của bạn hơn.

Để hỗ trợ đầy đủ tất cả các trình duyệt, bạn cần thêm một vài thẻ vào phần tử <head> của mỗi trang.

<!-- 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 và Opera

Chrome và Opera sử dụng icon.png, được thiết bị điều chỉnh theo kích thước cần thiết. Để ngăn việc tự động điều chỉnh tỷ lệ, bạn cũng có thể cung cấp thêm kích thước bằng cách chỉ định thuộc tính sizes.

Safari

Safari cũng sử dụng thẻ <link> có thuộc tính rel: apple-touch-icon để biểu thị biểu tượng màn hình chính.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Tệp PNG không trong suốt có kích thước 180 px hoặc 192 px vuông là lựa chọn lý tưởng cho apple-touch-icon.

Bạn không nên thêm nhiều phiên bản thông qua thuộc tính sizes. Trước đây, Safari cho iOS sẽ xem xét từ khoá -precomposed để tránh thêm hiệu ứng hình ảnh, nhưng điều này không cần thiết kể từ iOS 7.

Internet Explorer và Windows Phone

Trải nghiệm màn hình chính mới của Windows 8 hỗ trợ 4 bố cục khác nhau cho các trang web được ghim và yêu cầu 4 biểu tượng. Bạn có thể bỏ qua các thẻ meta có liên quan nếu không muốn hỗ trợ một kích thước cụ thể.

<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">

Ô trong Internet Explorer

"Trang web được ghim" và "Ô động" xoay vòng của Microsoft vượt xa các cách triển khai khác và nằm ngoài phạm vi của hướng dẫn này. Bạn có thể tìm hiểu thêm tại trang cách tạo ô động của MSDN.

Phần tử màu của trình duyệt

Bằng cách sử dụng các phần tử meta khác nhau, bạn có thể tuỳ chỉnh trình duyệt và thậm chí cả các phần tử của nền tảng. Xin lưu ý rằng một số tính năng có thể chỉ hoạt động trên một số nền tảng hoặc trình duyệt nhất định, nhưng chúng có thể cải thiện đáng kể trải nghiệm.

Chrome, Firefox OS, Safari, Internet Explorer và Opera Coast cho phép bạn xác định màu sắc cho các phần tử của trình duyệt và thậm chí cả nền tảng bằng cách sử dụng thẻ meta.

Màu giao diện meta cho Chrome và Opera

Để chỉ định màu giao diện cho Chrome trên Android, hãy sử dụng màu giao diện meta.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">

Kiểu dành riêng cho Safari

Safari cho phép bạn tạo kiểu cho thanh trạng thái và chỉ định hình ảnh khởi động.

Chỉ định hình ảnh khởi động

Theo mặc định, Safari sẽ hiển thị màn hình trống trong thời gian tải và sau nhiều lần tải, Safari sẽ hiển thị ảnh chụp màn hình của trạng thái trước đó của ứng dụng. Bạn có thể ngăn chặn điều này bằng cách yêu cầu Safari hiển thị hình ảnh khởi động rõ ràng, bằng cách thêm thẻ liên kết, với rel=apple-touch-startup-image. Ví dụ:

<link rel="apple-touch-startup-image" href="icon.png">

Hình ảnh phải có kích thước cụ thể của màn hình thiết bị mục tiêu, nếu không thì hình ảnh đó sẽ không được sử dụng. Hãy tham khảo Nguyên tắc về nội dung trên web của Safari để biết thêm thông tin.

Mặc dù tài liệu của Apple về chủ đề này khá ít, nhưng cộng đồng nhà phát triển đã tìm ra cách nhắm đến tất cả thiết bị bằng cách sử dụng truy vấn phương tiện nâng cao để chọn thiết bị phù hợp, sau đó chỉ định hình ảnh chính xác. Sau đây là một giải pháp hiệu quả, nhờ vào gist của tfausak

Thay đổi giao diện thanh trạng thái

Bạn có thể thay đổi giao diện của thanh trạng thái mặc định thành black hoặc black-translucent. Với black-translucent, thanh trạng thái sẽ nổi lên trên nội dung toàn màn hình, thay vì đẩy nội dung đó xuống. Điều này giúp bố cục có chiều cao lớn hơn, nhưng lại che khuất phần trên cùng. Sau đây là mã bắt buộc:

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