Cách chỉnh sửa giao diện web/blog cho điện thoại

Ngày nay công cụ lướt web đã phổ biến trên những chiếc smart phone. vậy chúng ta phải chỉnh sửa sao cho website cũng như blogger của các bạn thân với người dùng hơn.

Cách chỉnh sửa giao diện web/blog cho điện thoại

Vấn đề hay gặp

Chữ quá nhỏ để đọc.
Chưa đặt cửa sổ xem thiết bị di động.
Các liên kết quá gần nhau.
Nội dung rộng hơn màn hình.

Để chỉnh sửa các bạn làm như sau.

Bạn bổ sung vào thẻ header một thẻ meta như sau:

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Thẻ nay mang ý nghĩa rằng bạn định dạng các phiên bản trên website dựa trên kích thước chiều rộng màn hình với tỉ lệ là 1.0. Trình duyệt sẽ dựa vào kích thước màn hình hiển thị (hoặc kích thước cửa sổ) để tính toán những quy ước khác về sau này.

Tiếp theo, do mỗi thiết bị có nhiều kích thước màn hình khác nhau nên khi hiển thị trên đó chúng ta cũng có những lựa chọn khác nhau (ví dụ như bạn có thể hiển thị website trên tablet khác với trên điện thoại có màn hình lớn, hay điện thoại có màn hình lớn sẽ hiển thị khác với điện thoại có màn hình nhỏ hơn). Để thiết lập điều này, chúng ta cần quy định Cascading Style Sheet (CSS) cho mỗi phiên bản như vậy. Để không ảnh hưởng đến cái chung, chúng ta sẽ tạo ra một file CSS có nội dung là các tùy chỉnh cho các phiên bản khác nhau dựa vào kích thước màn hình. Tôi đăt tên cho file này là responsive.css và có nội dung ban đầu như sau:

Code:

/******** For mobile device ********/
/******************************/
/*---- Responsive base screen witdh ------- */
/* width - 30 */
/* Tablet Devices Resizing */
@media screen and (max-width: 1024px) and  (min-width: 970px){
}
@media screen and  (max-width: 970px){
}
@media screen and  (max-width: 870px)  and (min-width:750px){
}
@media screen and (max-width:750px) and (min-width:680px){
}
@media screen and (min-width:320px) and (max-width: 480px) {
}
@media screen and (max-width: 380px) {
}
/*---- end Responsive base screen witdh ------- */

Ở đây tôi có một vài kích thước màn hình phổ biến, bạn có thể sử dụng công cụ Resize My Browser mà tôi đã giới thiệu ở trên để xác định thêm những thiết bị khác nếu bạn quan tâm đến chúng.

Phần mã ở trên là những thay đổi cấu hình CSS chúng ta sẽ bổ sung tùy theo độ rộng của màn hình.

Tiếp theo chúng ta sẽ gắn file này vào website để thực hiện tùy chỉnh:

Code:

<link rel="stylesheet" type="text/css" href="link_to_file/responsive.css" />

Bạn lưu ý là phần CSS này phải nằm dưới CSS chính của website, nếu không có thể nó sẽ bị CSS chính ghi đè,lúc đó nó sẽ không có tác dụng.

Tới bước này, bạn sẽ kiểm tra lại trên công cụ kiểm tra tính thân thiện với điện thoại xem đã có những lỗi nào được fix hay chưa. Đa phần các lỗi do font chữ nhỏ đã được fix vì chúng ta đã định dạng lại chúng theo tỉ lệ tương ứng với điện thoại ở thẻ header. Nếu giao diện của bạn vẫn còn quá nhỏ so với điện thoại, có thể là chúng ta đã định dạng cố định kích thước (pixel) không thích hợp. Tuy nhiên chúng ta vẫn phải kiểm tra xem nó tương thích với di động được bao nhiêu rồi.

Tham khảo thêm