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 các thành phần như thẻ thông tin tuỳ chỉnh. Những thao tác chỉnh sửa đơn giản này có thể làm tăng mức độ tương tác và đưa người dùng quay lại trang web của bạn.
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 (như biểu tượng, màu thanh địa chỉ) và thậm chí thêm những nội dung như thẻ thông tin tuỳ chỉnh. Những điều chỉnh đơn giản này có thể làm 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 tuyệt vời
Khi người dùng truy cập trang web của bạn, trình duyệt sẽ cố gắng tìm nạp 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 thẻ trình duyệt, nút chuyển ứng dụng gần đây, trang thẻ mới (hoặc mới truy cập gần đây) và nhiều vị trí 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ỗ 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 theo 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> với 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">
Ảnh PNG không trong suốt có kích thước 180px hoặc 192px vuông là 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
Giao diện 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 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">
Thẻ thông tin trong Internet Explorer
"Trang web được ghim" và "Thẻ thông tin trực tiếp" xoay vòng của Microsoft vượt xa các phương thức 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 về cách tạo thẻ thông tin trực tiếp trên MSDN.
Phần tử trình duyệt màu
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í là các phần tử của nền tảng. Hãy lưu ý rằng một số chức 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 có thể giúp nâng cao trải nghiệm đáng kể.
Chrome, Firefox OS, Safari, Internet Explorer và Opera Coast cho phép bạn xác định màu cho các phần tử của trình duyệt và thậm chí là 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">
Tạo 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 hiển thị màn hình trống trong thời gian tải và sau nhiều lần tải ảnh chụp màn hình trạng thái trước đó của ứng dụng. Bạn có thể ngăn điều này bằng cách yêu cầu Safari hiển thị một 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 hình ảnh sẽ không được sử dụng. Hãy tham khảo Nguyên tắc về nội dung 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 còn 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 nội dung nghe nhì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ờ tệp 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 xuống. Điều này giúp bố cục có chiều cao lớn hơn, nhưng che khuất phần trên cùng. Dưới đây là mã bắt buộc:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black