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 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 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.
Cung cấp các biểu tượng và ô đẹp mắt
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 trang web 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ả trình duyệt, bạn cần thêm một vài thẻ vào <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 điều chỉnh tỷ lệ theo kích thước cần thiết bằng
thiết bị. Để ngăn việc tự động chuyển tỷ lệ, bạn cũng có thể cung cấp thêm
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ị màn hình chính.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Định dạng PNG không trong suốt có kích thước hình vuông 180 px hoặc 192 px là hình vuông lý tưởng cho biểu tượng quả táo.
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 dành cho iOS sẽ xem xét từ khoá -precomposed để tránh
thêm hiệu ứng hình ảnh, nhưng kể từ iOS 7 là điều chưa cần thiết.
Internet Explorer và Windows Phone
Trải nghiệm màn hình chính mới của Windows 8 hỗ trợ bốn bố cục khác nhau cho các trang web được ghim và yêu cầu bốn biểu tượng. Bạn có thể bỏ thẻ meta liên quan nếu bạn 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" của Microsoft và xoay "Thẻ thông tin trực tiếp" vượt xa những gì 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 MSDN cách tạo thẻ thông tin trực tiếp.
Các phần tử của trình duyệt màu
Khi sử dụng nhiều phần tử meta, bạn có thể tuỳ chỉnh trình duyệt và
thậm chí là các yếu tố
của nền tảng. Hãy nhớ 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ưng chúng có thể nâng cao trải nghiệm đáng kể.
Chrome, Hệ điều hành Firefox, Safari, Internet Explorer và Opera Coast cho phép bạn xác định màu cho các thành phần của trình duyệt và thậm chí cả nền tảng 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
tải ảnh chụp màn hình về 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ể trên màn hình của thiết bị mục tiêu hoặc sẽ không được sử dụng. Tham khảo Nguyên tắc về nội dung web của Safari để biết thêm chi tiết.
Mặc dù tài liệu của Apple rất ít về chủ đề này, nhưng cộng đồng nhà phát triển đã tìm ra cách nhắm mục tiêu tất cả các thiết bị bằng cách sử dụng các truy vấn phương tiện truyền thông nâng cao để chọn thiết bị thích hợp rồi chỉ định hình ảnh chính xác. Sau đây là một giải pháp hiệu quả, nhờ ý kiến của tfausak
Thay đổi giao diện của 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 ở trên cùng
nội dung toàn màn hình thay vì đẩy nội dung xuống. Thao tác này giúp bố cục
chiều cao 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