Bạn đang xem : meta content width device width scale ban đầu 1.0 name viewport

Thiết kế web đáp ứng –

Chế độ xem

Viewport là gì?

Chế độ xem là vùng hiển thị của người dùng trên một trang web.

Chế độ xem thay đổi tùy theo thiết bị và sẽ nhỏ hơn trên điện thoại di động so với màn hình máy tính.

Trước máy tính bảng và điện thoại di động, các trang web chỉ được thiết kế cho màn hình máy tính và nó phổ biến cho
trang web có thiết kế tĩnh và kích thước cố định.

Sau đó, khi chúng tôi bắt đầu lướt Internet bằng máy tính bảng và điện thoại di động,
kích thước trang web quá lớn để vừa với chế độ xem.
Để khắc phục điều này, trình duyệt trên các thiết bị đó đã thu nhỏ toàn bộ trang web để vừa với màn hình.

Điều này không hoàn hảo !! Nhưng một cách khắc phục nhanh chóng.

Đặt chế độ xem

HTML5 đã giới thiệu một phương pháp để cho phép các nhà thiết kế web kiểm soát chế độ xem, thông qua
Thẻ & lt; meta & gt; .

Bạn nên bao gồm phần tử khung nhìn & lt; meta & gt; sau trong tất cả các trang web của mình:

& lt; meta name = “viewport” content = “width = device-width, initial-scale = 1.0” & gt;

Điều này cung cấp cho trình duyệt hướng dẫn về cách
để kiểm soát kích thước và tỷ lệ của trang.

Phần width = device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị). < / p>

Phần initial-scale = 1.0 đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.

Xem Thêm  Cách Đọc Số Âm Trong Tiếng Anh ​, Cách Đọc Số Thập Phân Và Số Âm - số âm tiếng anh là gì

Đây là ví dụ về trang web không có thẻ meta chế độ xem và cùng một trang web có thẻ meta chế độ xem:

Mẹo: Nếu bạn đang duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết ở trên để xem sự khác biệt.

Kích thước Nội dung cho Cửa sổ xem

Người dùng được sử dụng để cuộn trang web theo chiều dọc trên cả máy tính để bàn và thiết bị di động
thiết bị – nhưng không theo chiều ngang!

Vì vậy, nếu người dùng buộc phải cuộn theo chiều ngang hoặc thu nhỏ, để xem
toàn bộ trang web dẫn đến trải nghiệm người dùng kém.

Một số quy tắc bổ sung cần tuân theo:

1. KHÔNG sử dụng các phần tử có chiều rộng cố định lớn – Ví dụ: nếu
một hình ảnh được hiển thị ở độ rộng lớn hơn so với chế độ xem mà nó có thể gây ra
khung nhìn để cuộn theo chiều ngang. Nhớ điều chỉnh nội dung này để vừa với
chiều rộng của khung nhìn.

2. KHÔNG để nội dung dựa vào chiều rộng khung nhìn cụ thể để
hiển thị tốt
– Vì kích thước và chiều rộng màn hình trong các pixel CSS khác nhau
rộng rãi giữa các thiết bị, nội dung không được dựa vào chiều rộng khung nhìn cụ thể
để hiển thị tốt.

3. Sử dụng các truy vấn phương tiện CSS để áp dụng các kiểu khác nhau cho nhỏ và
màn hình lớn
– Đặt độ rộng CSS tuyệt đối lớn cho các phần tử trang
sẽ khiến phần tử quá rộng đối với chế độ xem trên thiết bị nhỏ hơn.
Thay vào đó, hãy cân nhắc sử dụng các giá trị chiều rộng tương đối, chẳng hạn như chiều rộng: 100%. Cũng là
cẩn thận khi sử dụng các giá trị định vị tuyệt đối lớn. Nó có thể khiến phần tử
rơi ra ngoài khung nhìn trên các thiết bị nhỏ.

Xem Thêm  Cách lấy các phần tử từ bộ trong ví dụ Python - python là phần tử trong bộ


Xem thêm những thông tin liên quan đến chủ đề meta content width width device scale ban đầu 1.0 name viewport

Get your media queries working with the meta viewport HTML tag

  • Tác giả: Kevin Powell
  • Ngày đăng: 2020-10-09
  • Đánh giá: 4 ⭐ ( 9912 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Conquering Responsive Layouts: https://courses.kevinpowell.co/conquering-responsive-layouts

    Our phones assume that websites are NOT responsive, so if you don’t tell them that you did all the hard work and set up some media queries, it’ll just ignore all that and simply scale your website down to fit.

    Using the meta viewport tag, we can tell our devices that we did use media queries and prevent that from happening.

    Come hang out with other dev’s in my Discord Community
    💬 https://discord.gg/nTYCvrK

    Keep up to date with everything I’m up to
    ✉ https://www.kevinpowell.co/newsletter

    Help support my channel
    👨‍🎓 Get a course: https://www.kevinpowell.co/courses
    👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
    💖 Support me on Patreon: https://www.patreon.com/kevinpowell

    My editor: VS Code – https://code.visualstudio.com/

    I’m on some other places on the internet too!

    If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

    Instagram: https://www.instagram.com/kevinpowell.co/
    Twitter: https://twitter.com/KevinJPowell
    Codepen: https://codepen.io/kevinpowell/
    Github: https://github.com/kevin-powell

    And whatever you do, don’t forget to keep on making your corner of the internet just a little bit more awesome!

What is (Example)

  • Tác giả: teamtreehouse.com
  • Đánh giá: 4 ⭐ ( 8094 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Could someone provide some useful links for what the “viewport” thingy is?

    I don’t really understand it and would like some help.
    Why wo…

Responsive viewport

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 1272 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Responsive viewport, nội dung HTML sẽ đối ứng với màn hình giao diện PC, nên khi xem trên các thiết bị như Tablet hay Phone sẽ hiển thị không như ý muốn, cụ thể là nội dung bị Zoom khác đi, để giải quyết vấn đề này ta dùng viewport.

▷meta name = viewport content = width = device-width initial-scale = 1.0 ejemplo de código que no funciona ✔️ Foro Ayuda 【 2022 】

  • Tác giả: foroayuda.es
  • Đánh giá: 5 ⭐ ( 1410 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: l➤Luego de investigar en varios repositorios y sitios al concluir nos encontramos con la solución que te enseñaremos a continuación. Ejemplo: agregue una

Viewport meta tag – HTML: HyperText Markup Language

  • Tác giả: developer.mozilla.org
  • Đánh giá: 5 ⭐ ( 4561 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This article describes how to use the “viewport” tag to control the viewport’s size and shape.

meaning of code example

  • Tác giả: newbedev.com
  • Đánh giá: 4 ⭐ ( 8693 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Example: Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewp

What is ““?

  • Tác giả: stackoverflow.com
  • Đánh giá: 5 ⭐ ( 5646 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Bảng phiên âm tiếng Anh IPA - Cách phát âm chuẩn quốc tế - tạo bảng trong html

By ads_php