Lỗi website không responsive trên các thiết bị có màn hình bé

Hiện tượng khi bạn truy cập vào website mà website lại không tùy biến responsive như lúc thiết kế hay lên giao diện. Đơn giản chỉ vì chúng ta thiếu một thẻ meta dùng để xác định xem site có tùy biến thích ứng với màn hình hay không.

Ví dụ như blog của mình cũng dính trường hợp đó sau khi mình viết code test kiểm tra trên firefox thì được nhưng trên chrome thì lại không thấy gì và bị vỡ tùm lum làm cho chỗ chữ to chữ nhỏ và khi kiểm tra bằng công cụ của Google thì báo website không tương thích với thiết bị di động.

Vậy đó là lỗi gì và khắc phục ra sao?

Đơn giản là bạn chỉ cần chèn thêm thẻ meta sau vào đầu phần header trong file header.php trong wordpress hoặc header.tpl của nukeviet hoặc miễn là file header của các mã nguồn và đảo bảo bạn đặt trong thẻ <header></header> của website

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

Chỉ đơn giản vậy thôi

Ý nghĩa cụ thể hơn thì đó là content=”width=device-width, initial-scale=1.0″ nó sẽ hiển thị full kích thước màn hình của thiết bị để hiển thị ở các thiết bị màn hình nhỏ thay vì bị vỡ zoom chữ to chữ nhỏ.

Chúc các bạn thành công!