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

responsive

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!

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

  1. đức viết:

    cho e hỏi là e theme của e k tùy biến được phải làm sao ạ. e có thêm code của a vào cũng k được

    1. Thịnh Nguyễn viết:

      Vấn đề của bạn là bạn phải thích hợp gọi được file css của bootstrap ra, hoặc viết đúng cấu trúc trong trường hợp bạn không sử dụng được, và bạn phải giả lập kích thước rồi bắt dầu viết, với trường hợp tự viết thì file css đó phải là gọi cuối cuối cùng trong php nhưng nó sẽ nhận diện ở kích thước của nó

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back To Top