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

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  Hình ảnh HTML - mã hóa html để chèn hình ảnh

Đâ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 gọi một hàm JavaScript trong HTML - gọi hàm trong html


Xem thêm những thông tin liên quan đến chủ đề meta name viewport nội dung chiều rộng chiều rộng thiết bị tỷ lệ ban đầu

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 ⭐ ( 6423 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!

Những Điều Cần Biết Về Meta Viewport

  • Tác giả: hethongbokhoe.com
  • Đánh giá: 5 ⭐ ( 1476 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Viewport Là Gì – Những Điều Cần Biết Về Meta Viewport

meta chiều rộng thiết bị “viewport”: Chiều rộng sai nhỏ trên Opera Mobile 9.7 (10 công trình)

  • Tác giả: vi.uwenku.com
  • Đánh giá: 4 ⭐ ( 5024 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối với dự án web di động hiện tại của tôi, tôi sử dụng thẻ meta

Meta Viewport là gì? Những điều cần biết về Meta Viewport

  • Tác giả: tatthanh.com.vn
  • Đánh giá: 4 ⭐ ( 9976 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi bắt đầu một dự án thiết kế website, thiết kế website responsive là một trong những điều cần xem xét đầu tiên. Và Meta Viewport là thứ quan trọng, biến một website thông thường thành một website responsive. Tham khảo bài viết dưới đây để tìm hiểu meta viewport là gì và tầm quan trọng của nó đối với website.

Meta Viewport là gì? Cẩm nang những điều cần biết về loại thẻ này

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

Meta Viewport Là Gì – Những Điều Cần Biết Về Meta Viewport 2022

  • Tác giả: vobmapping.vn
  • Đánh giá: 3 ⭐ ( 2357 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trang chủ » Blog » Thiết kế website » Meta Viewport là gì? Cách thiết lập Meta Viewport cho website cực dễ

Meta Viewport

  • Tác giả: blog.haposoft.com
  • Đánh giá: 5 ⭐ ( 2377 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  Danh sách thẻ HTML (với 100 ví dụ) - danh sách các thẻ html

By ads_php