Thẻ meta viewport: giải thích width=device-width

Thẻ nên dùng

Đặt dòng này trong <head> của mọi trang:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width làm bố cục rộng bằng màn hình, và initial-scale=1 mở trang ở mức zoom 100%. Hầu hết các trang web chỉ cần như vậy. Một trang đầy đủ đã có thẻ này:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

Script đọc thẻ và chiều rộng bố cục. Trình duyệt máy tính bỏ qua thẻ viewport, nên trong bản xem trước này chiều rộng đơn giản là chiều rộng của khung xem trước. Trên điện thoại, cùng tệp này sẽ báo chiều rộng của điện thoại (thường từ 360 đến 430 pixel CSS) nhờ có thẻ.

Điện thoại làm gì khi thiếu thẻ

Một trình duyệt di động không tìm thấy thẻ viewport sẽ cho rằng trang được làm cho máy tính. Nó dàn trang rộng khoảng 980 pixel, rồi thu nhỏ toàn bộ cho vừa màn hình. Hai chiếc điện thoại mô phỏng bên dưới tải cùng một trang, một chiếc dàn ở 980px và một chiếc ở chiều rộng điện thoại, cả hai được thu về cùng kích thước:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

Trên điện thoại đầu tiên, chữ 16px trở nên tí hon và người đọc phải dùng hai ngón tay để phóng to. Trên điện thoại thứ hai, chữ vẫn dễ đọc, và các cột xếp chồng lên nhau vì quy tắc @media (max-width: 600px) khớp. Đó là nhiệm vụ thứ hai của thẻ: media query nhìn thấy chiều rộng bố cục, nên không có thẻ thì điện thoại báo 980px và các style cho di động của bạn không bao giờ được áp dụng. Đổi 375 thành 980 trong show('with', 375) thì hai điện thoại trông giống hệt nhau.

Thẻ chỉ là một nửa công việc

Thẻ viewport cho bạn một bố cục hẹp; CSS của bạn phải vừa trong đó. Chỉ một phần tử có chiều rộng cố định lớn hơn màn hình cũng làm cả trang cuộn ngang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

Khung đầu tiên cuộn ngang; khung thứ hai co lại cho vừa. Hãy gán max-width: 100% cho ảnh và các phần tử rộng khác, và ưu tiên chiều rộng linh hoạt (phần trăm, fr, flexbox) thay vì chiều rộng pixel cố định.

Các giá trị của viewport

Các giá trị được ngăn cách bằng dấu phẩy. Một trang lấp đầy toàn màn hình trên điện thoại có tai thỏ trông như sau:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

Đừng chặn zoom

Bạn sẽ gặp thẻ này trong các template cũ:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Nó ngăn phóng to bằng hai ngón tay, điều mà người thị lực kém phụ thuộc vào, và các công cụ kiểm tra khả năng tiếp cận như Lighthouse sẽ đánh dấu nó. Safari trên iOS bỏ qua user-scalable=no, nên thẻ này thậm chí còn không hoạt động nhất quán. Nếu một ô nhập tự phóng to khi chạm vào trên iPhone, nguyên nhân là cỡ chữ của input nhỏ hơn 16px; hãy đặt font-size của input ít nhất là 16px thay vì tắt zoom.

Lỗi thường gặp

• Quên thẻ. Một stylesheet responsive không có tác dụng gì trên điện thoại nếu thiếu thẻ này, vì media query thấy bố cục 980px. Hãy đặt nó cạnh thẻ title trong template trang.
• Dùng dấu chấm phẩy giữa các giá trị. Hãy dùng dấu phẩy: width=device-width, initial-scale=1.
• Viết cứng một chiều rộng như width=375. Màn hình có nhiều kích thước; hãy dùng device-width.
• Tắt zoom bằng user-scalable=no hoặc maximum-scale=1.
• Đổ lỗi cho thẻ khi trang cuộn ngang. Tìm phần tử rộng hơn màn hình và cho nó chiều rộng linh hoạt.