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ử …
Đ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!
Mẫu website nổi bật của tôi
Từ khóa: responsive
- Bình luận
