Trang chủ » Blog » Thiết kế website » Meta Viewport là gì? Cách thiết lập Meta Viewport cho website cực dễ
Để website hoàn thiện, đi vào sử dụng với đầy đủ tính năng, tiện ích và giao diện đẹp. Chúng ta có khá nhiều vấn đề cần quan tâm, thiết lập, trong đó có Meta Viewport. Vậy bạn đã hiểu Meta Viewport là gì chưa? Vì sao đây là nhân tố không thể lơ là khi thiết kế web? Làm thế nào để cài đặt loại Meta đặc biệt này phù hợp với từng thiết bị? Cùng tienkiem.com.vn tìm hiểu qua bài viết sau đây.
Đang xem: Meta viewport là gì
Meta Viewport là gì?
Meta Viewport là gì?
Meta Viewport chính là một thẻ được đặt ở phần của HTML. Chúng giúp cho trình duyệt biết website sẽ được hiển thị thế nào.
Viewport là khung nhìn, là khu vực hiển thị nội dung mà người dùng nhìn thấy trên website. Tùy vào từng thiết bị mà người dùng sử dụng để truy cập web mà Viewport sẽ có sự thay đổi. Viewport trên điện thoại di động sẽ nhỏ hơn so với Viewport trên màn hình máy tính.
Meta description là gì?
Meta title là gì?
Vì sao phải chú ý thiết lập Meta Viewport khi thiết kế web?
Khi bạn truy cập vào website, toàn bộ nội dung web được hiển thị đầy đủ trên màn hình. Tuy nhiên với các thiết bị di động, chế độ xem này đã bị “ảo”. Web có thể không hiển thị đầy đủ trên màn hình di động, bị tràn màn sang chế độ cuộn ngang khá bất tiện. Vì vậy, thông qua thẻ , người thiết kế website có thể kiểm soát chế độ xem (kiểm soát kích thước và tỷ lệ của trang web).
Đặc biệt, việc thay đổi này không làm thay đổi thiết kế website bán hàng trên thiết bị di động (website phiên bản mobile) mà chỉ giúp website của bạn hiển thị tốt trên thiết bị di động với kích thước viewport ảo lớn hơn hoặc nhỏ hơn. Nếu không có meta viewport, website sẽ hiển thị mặc định vào chế độ ảo của thiết bị di động.
Bên cạnh đó, những website thân thiện với thiết bị di động sẽ được xếp hạng cao hơn trên công cụ tìm kiếm. Để web thực sự thân thiện trên thiết bị di động với mức đầu tư thấp, website nên giảm tối đa thời gian người dùng dành cho việc thay đổi kích thước trang sao cho phù hợp với màn hình mình đang sử dụng. Và vì vậy, việc sử dụng Meta Viewport là một trong những giải pháp hàng đầu giúp web hiển thị chuẩn trên mọi thiết bị.
Cú pháp thiết lập Meta Viewport
Thiết lập Meta Viewport
Cú pháp thiết lập Meta Viewport cho website cũng tương đối đơn giản. Đây là một cú pháp điển hình bạn có thể tham khảo nhé!
… …Câu lệnh này có nghĩa là: chiều rộng chế độ xem bằng chiều rộng thiết bị mà người dùng dùng để xem website. Tỷ lệ của website sẽ được đặt thành 100% (hay chia tỷ lệ nội dung thành 1).
Xem thêm: Need For Speed: Carbon Download, Where Can I Download Need For Speed Carbon
5 yếu tố quan trọng cấu thành nên Meta Viewport
Có 5 yếu tố quan trọng trong cú pháp cấu thành nên Meta Viewport mà bạn cần nhớ đó là:
width: Đây chính là chiều rộng của khung nhìn. Thường thì chiều rộng này sẽ được đặt bằng với chiều rộng của thiết bị hoặc kích thước responsive thường thấy.initial-scale: Đây là mức thu phóng của website và chiều rộng của chế độ xem. initial-scale thường được đặt mặc định bằng 1.minimum-scale: Mức thu phóng tối thiểu. Tức là người dùng có thể thu nhỏ bao nhiêu. Điều này sẽ khiến cho người dùng mất kiểm soát và không khuyến nghị sử dụng chúng trong thẻ Meta Viewport.maximum-scale: Mức thu phóng tối đa. Tương tự như mức thu phóng tối thiểu, chúng không được khuyến nghị sử dụng vì có thể đánh mất quyền kiểm soát của người dùng.user-scalable: Cho phép người dùng phóng to và chúng cũng được khuyến nghị không nên sử dụng nhé!
Một số quy tắc bổ sung cần tuân thủ khi dùng Meta Viewport
Khi dùng Meta Viewport bạn cần phải đảm bảo tuân thủ một số quy tắc sau đây:
Quy tắc thiết lập Meta Viewport
Nội dung của trang web phải luôn nằm trong giới hạn chiều ngang màn hình thiết bị mà người dùng sử dụng. Như vậy, người dùng chỉ việc cuộn dọc từ trên xuống là có thể đọc được trọn vẹn nội dung bài viết mà không cần kéo sang ngang. Nếu website của bạn buộc người dùng phải cuộn ngang hoặc zoom trang web mới có thể đọc được trọn vẹn nội dung bài viết. Chắc chắn tỉ lệ thoát trang ngay lập tức là vô cùng lớn.Tuyệt đối không sử dụng các HTML element có chiều rộng cố định quá lớn. Chẳng hạn, một hình ảnh minh họa trong bài viết có kích thước quá lớn, vượt qua chiều rộng của màn hình điện thoại, người dùng cần cuộn ngang để kéo sang mới xem được toàn bộ hình ảnh sẽ vô cùng bất tiện. Do vậy, hãy điều chỉnh hình ảnh sao cho phù hợp nhất với tỉ lệ hiển thị của từng thiết bị.KHÔNG để thiết lập Responsive dựa vào chiều rộng cụ thể. Thay vào đó, bạn nên giới hạn từ kích thước nào tới kích thước nào chúng sẽ được hiển thị như nhau. Chẳng hạn như ảnh có kích thước 240px lên 420px sẽ hiển thị giống nhau, từ 420px đến 720px giống nhau.Sử dụng giá trị chiều rộng tương đối cho một số đối tượng nhằm tránh bị tràn ra khi hiển thị trên màn hình nhỏ mà lại quá bé khi hiển thị trên màn hình lớn. Thường, ta có thể thiết lập độ rộng auto hoặc để mức 100%.
Xem thêm: Bảng Ngọc Jhin Mùa 10: Hướng Dẫn Cách Chơi Jhin Ad Mùa 11, Bảng Ngọc Jhin Mùa
Lời Kết
Tóm lại, Meta Viewport là một trong những thiết lập quan trọng mà các Designer website không thể bỏ qua nếu muốn website thân thiện, mang tới trải nghiệm tốt nhất cho người dùng. Hãy ghi nhớ một số quy tắc thiết lập mà chúng tôi đề cập ở trên để chắc chắn rằng website của bạn có thể hiện thị tốt nhất trên tất cả các thiết bị dù đó có là điện thoại di động hay máy tính cây, laptop.
