Hiện tại google rất quan trọng việc hiển thị website đẹp và thân thiện trên mobile. Khi website hiện thị tốt trên mobile thì google sẽ đánh giá rất cao. Vậy để hiển thị tốt web của bạn cần có responsive.
Mục lục
- Responsive là gì?
- Điều kiện cần phải có khi làm responsive là gì?
- Các giá trị của thẻ meta name=”viewport”
Responsive là gì?
Hiểu nôm na thì responsive là website đáp ứng được các trình duyệt khác nhau. Giúp web dễ đọc và tương tác trên các thiết bị. Trên điện thoại sẽ không phải zoom để nhìn phần tử …
Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.
Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
Điều kiện cần phải có khi làm responsive là gì?
Để responsive bắt buộc phải có thẻ meta viewport trong <head>
<!--Thêm thẻ này vào trong thẻ <head> của html--> <meta name="viewport" content="width=device-width">
Khi thêm code trên là web đã được nhận respon rồi.
Chú ý: nếu web không có code css đặc biệt dành cho respon thì không lên dùng thẻ meta viewport này. nếu không sẽ phản tác dụng 🙂
Các giá trị của thẻ meta name=”viewport”
| Property | Description |
|---|---|
| width | The width of the virtual viewport of the device. |
| device-width | The physical width of the device’s screen. |
| height | The height of the “virtual viewport” of the device. |
| device-height | The physical height of the device’s screen. |
| initial-scale | The initial zoom when visiting the page. 1.0 does not zoom. |
| minimum-scale | The minimum amount the visitor can zoom on the page. 1.0 does not zoom. |
| maximum-scale | The maximum amount the visitor can zoom on the page. 1.0 does not zoom. |
| user-scalable | Allows the device to zoom in and out. Values are yes or no. |
Ví dụ: không cho người dùng zoom khi dùng điện thoại thì như sau
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Chúc các bạn thành công!
- Bình luận
