وثائق HTML قابلة للتشغيل: meta viewport

Q: ما هو وسم meta viewport المعتمد؟

، ويوضع في . وهو الخيار الصحيح لكل صفحة متجاوبة تقريبًا.

Q: لماذا لا يعمل meta viewport؟

تحقق من أن الوسم داخل ، وأن name هي viewport، وأن القيم مفصولة بفواصل. إذا ظلت الصفحة تتمرر أفقيًا، فهناك عنصر أعرض من الشاشة، مثل عرض ثابت أو صورة كبيرة أو كلمة طويلة، والوسم لا يستطيع إصلاح CSS أعرض من الجهاز.

الوسم الذي تستخدمه

ضع هذا السطر في <head> كل صفحة:

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

width=device-width تجعل التخطيط بعرض الشاشة، وinitial-scale=1 تفتح الصفحة بتكبير 100%. هذا كل ما تحتاجه معظم المواقع. صفحة كاملة والوسم في مكانه:

<!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>

السكربت يقرأ الوسم وعرض التخطيط. متصفحات الحاسوب تتجاهل وسم viewport، لذلك يكون العرض في هذه المعاينة ببساطة عرض صندوق المعاينة. أما على الهاتف فيُظهر الملف نفسه عرض الهاتف (عادةً من 360 إلى 430 بكسل CSS) بفضل الوسم.

ماذا تفعل الهواتف من دونه

متصفح الجوال الذي لا يجد وسم viewport يفترض أن الصفحة بُنيت للحاسوب. فيرتبها بعرض نحو 980 بكسل، ثم يصغّرها كلها لتناسب الشاشة. الهاتفان التجريبيان أدناه يحمّلان الصفحة نفسها، أحدهما مرتب بعرض 980px والآخر بعرض هاتف، وكلاهما مصغّر إلى الحجم نفسه:

<!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>

في الهاتف الأول ينتهي النص ذو الحجم 16px صغيرًا جدًا ويضطر القارئ إلى التكبير بإصبعين. وفي الثاني يبقى مقروءًا، وتتكدس الأعمدة لأن القاعدة @media (max-width: 600px) تنطبق. وهذه هي الوظيفة الثانية للوسم: استعلامات الوسائط ترى عرض التخطيط، فمن دون الوسم يُبلغ الهاتف عن 980px ولا تنطبق تنسيقات الجوال أبدًا. غيّر 375 إلى 980 في show('with', 375) وسيبدو الهاتفان متماثلين.

الوسم نصف المهمة

وسم viewport يعطيك تخطيطًا ضيقًا، وعلى CSS الخاص بك أن يتسع فيه. عنصر واحد بعرض ثابت أعرض من الشاشة يجعل الصفحة كلها تتمرر أفقيًا:

<!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>

الصندوق الأول يتمرر أفقيًا، والثاني يتقلص ليتسع. أعطِ الصور والعناصر العريضة الأخرى max-width: 100%، وفضّل العروض المرنة (النسب المئوية وfr وflexbox) على عروض البكسل الثابتة.

قيم viewport

القيمة	مثال	وظيفتها
`width`	`width=device-width`	عرض التخطيط. `device-width` هي عرض الشاشة ببكسلات CSS، والرقم مسموح أيضًا لكنه نادرًا ما يكون فكرة جيدة.
`initial-scale`	`initial-scale=1`	مستوى التكبير عند فتح الصفحة.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	حدود التكبير. الحد الأقصى المنخفض يمنع التكبير، فاترك `maximum-scale`.
`user-scalable`	`user-scalable=yes`	هل يُسمح بالتكبير بإصبعين. اتركها.
`viewport-fit`	`viewport-fit=cover`	تتيح للصفحة أن تمتد تحت النتوء أو الزوايا المستديرة، مع حشو `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	كيف تؤثر لوحة المفاتيح على الشاشة في التخطيط. يدعمها Chrome على Android.

القيم مفصولة بفواصل. الصفحة التي تملأ الشاشة كلها على الهواتف ذات النتوء تبدو هكذا:

<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>

لا تمنع التكبير

ستجد هذا الوسم في القوالب القديمة:

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

يمنع التكبير بإصبعين، الذي يعتمد عليه ضعاف البصر، وتنبّه إليه أدوات فحص إمكانية الوصول مثل Lighthouse. وSafari على iOS يتجاهل user-scalable=no، فالوسم لا يعمل بشكل متسق أصلًا. إذا كان حقل نموذج يُكبَّر عند لمسه على iPhone، فالسبب حجم خط أقل من 16px في الحقل، فاضبط font-size للحقل على 16px على الأقل بدلًا من تعطيل التكبير.

أخطاء شائعة

نسيان الوسم. ملف التنسيق المتجاوب لا يفعل شيئًا على الهواتف من دونه، لأن استعلامات الوسائط ترى تخطيطًا بعرض 980px. ضعه بجانب وسم title في قالب صفحتك.
فواصل منقوطة بين القيم. استخدم الفواصل: width=device-width, initial-scale=1.
تثبيت عرض محدد مثل width=375. الشاشات تختلف، فاستخدم device-width.
تعطيل التكبير بـ user-scalable=no أو maximum-scale=1.
لوم الوسم على التمرير الأفقي. جِد العنصر الأعرض من الشاشة وأعطه عرضًا مرنًا.

الأسئلة الشائعة

ما وظيفة وسم meta viewport؟

يخبر متصفحات الجوال بالعرض الذي يجب أن يكون عليه التخطيط. من دونه ترتب معظم الهواتف الصفحة بعرض نحو 980 بكسل CSS ثم تصغّرها لتناسب الشاشة. ومع width=device-width يطابق التخطيط عرض الشاشة، فيصبح النص مقروءًا وتعمل استعلامات الوسائط.

ما هو وسم meta viewport المعتمد؟

<meta name="viewport" content="width=device-width, initial-scale=1">، ويوضع في <head>. وهو الخيار الصحيح لكل صفحة متجاوبة تقريبًا.

لماذا لا يعمل meta viewport؟

تحقق من أن الوسم داخل <head>، وأن name هي viewport، وأن القيم مفصولة بفواصل. إذا ظلت الصفحة تتمرر أفقيًا، فهناك عنصر أعرض من الشاشة، مثل عرض ثابت أو صورة كبيرة أو كلمة طويلة، والوسم لا يستطيع إصلاح CSS أعرض من الجهاز.

هل أستخدم user-scalable=no أو maximum-scale=1؟

لا. كلاهما يمنع الناس من التكبير، الذي يعتمد عليه كثير من المستخدمين ضعاف البصر، ويفشلان في تدقيقات إمكانية الوصول. وSafari على iOS يتجاهل user-scalable=no على أي حال.

هل يؤثر وسم meta viewport في متصفحات الحاسوب؟

لا. متصفحات الحاسوب تتجاهله، فعرض التخطيط هناك هو ببساطة عرض النافذة. الوسم مهم على الهواتف والأجهزة اللوحية.

مفاهيم ذات صلة