Khắc phục lỗi hiển thị hình ảnh website trên điện thoại

Tại sao khi mở website bằng điện thoại hình ảnh lại không nhỏ lại theo màn hình điện thoại

Có rất nhiều nguyên nhân khiến hình ảnh của bạn không tự động thu nhỏ theo màn hình điện thoại, bên dưới Panpic xin sơ lược hai nguyên nhân chính như sau:

  • Website không hỗ trợ công nghệ reponsive cho màn hình các thiết bị cầm tay như điện thoại, máy tính bảng table
  • Cách thêm dữ liệu hình ảnh chưa đúng

Tùy thuộc vào các agency làm website, nhưng với sự hỗ trợ mạnh mẽ từ các framework giao diện cho công nghệ web cũng như công nghệ reponsive như bootstrap, getskeleton …vv, nên hầu hết các website được làm mới thời gian gần đây đều hỗ trợ công nghệ hiển thị đẹp trên điện thoại – reponsive. Riêng website làm tại Panpic thì luôn bắt kịp chuẩn xu thế công nghệ như Mobile friendly, SEO, Google schema, …vv. Do đó nguyên nhân thứ nhất ở trên là rất ít xẩy ra, hầu như chỉ xẩy ra với các website cũ làm trước năm 2010 chẳng hạn.

Vậy website đã được xây dựng theo chuẩn công nghệ Responsive tại sao hình ảnh vẫn không tự thu nhỏ khi truy cập trên điện thoại? Cách khắc phục như thế nào?

 

Hướng cách dẫn khắc phục lỗi nội dung website hình ảnh không tự thu nhỏ trên điện thoại

Sau khi thêm dữ liệu hình ảnh vào website thì mặc định thẻ html img của hỉnh ảnh luôn có 2 tham số width=”” height=”” chính hai tham số trên là thủ phạm làm cho hình ảnh trên website của bạn không tự động thu nhỏ – auto resize image trên điện thoại.  Cách khắc phục như sau:

1) Chèn hình ảnh vào website
2) Chế độ soạn thỏ: Đưa trình soạn thảo nội dung về chế độ view source (hay còn gọi là chế độ văn bản). Sau khi đưa về chế độ view soruce các bạn sẽ nhìn thấy thẻ html hình ảnh img như hình sau:
Khắc phục lỗi hình ảnh website trên điện thoại
+ Tại thẻ img các bạn xóa 2 thuộc tính width=”750″ height=”450″
+ Sau đó lưu lại nội dung vừa thay đổi và xem lại trên điện thoại