ForHosting KIT · قراءة المواقع ومراقبتها

مولد وسم meta viewport لصفحات الويب المتجاوبة

أنشئ وسم meta viewport متجاوبًا من دون الحاجة إلى تذكّر الترتيب الدقيق للسمات أو علامات الترقيم.

● Betaمجاني · داخل متصفحك

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

اختر device-width للتعريف القياسي الملائم للهواتف، أو أدخل عرضًا رقميًا موجبًا عندما تحتاج عن قصد إلى viewport ثابت، ثم حدّد المقياس الابتدائي. تتضمن النتيجة وسم HTML كاملًا جاهزًا للنسخ إلى head المستند، وقيمة content، وإعدادات موحّدة مناسبة للبرامج النصية والقوالب والاختبارات ومسارات البناء الآلية في مختلف المشاريع.

اختر عرض viewport بصورة مقصودة

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

حدّد المقياس الابتدائي وانسخ الوسم

يتحكم المقياس الابتدائي في مستوى التكبير عند تحميل الصفحة أول مرة. القيمة 1 هي الاختيار المعتاد، إذ يقابل بكسل CSS واحد بكسل CSS واحدًا في viewport قبل أن يكبّر المستخدم الصفحة. يستخدم الحقل القيمة 1 افتراضيًا، ويمكنك تقديم رقم موجب ومنتهٍ آخر لمتطلب محدد في اختبار أو تطبيق. يتحقق المولّد من هذا الإعداد بصورة مستقلة ويحافظ على معناه الرقمي في صيغة نصية ثابتة. ثم ينتج وسمًا كاملًا مثل <meta name="viewport" content="width=device-width, initial-scale=1">. ضعه داخل head المستند، ويُفضّل مرة واحدة فقط، بدل إضافة عدة تعريفات viewport قد يختلف تفاعلها بين المتصفحات. تعرض الاستجابة أيضًا سلسلة content والحقلين الموحّدين width وinitial_scale. استخدم meta_tag عند كتابة HTML، واستخدم content عندما يتوقع إطار العمل سمة content وحدها، واستخدم الحقول المفردة عند التحقق من الإعداد في الاختبارات. لا يغيّر طلب شبكة أو فحص صفحة أو اكتشاف user agent النتيجة؛ فالمدخلات المتطابقة تعيد دائمًا مخرجات متطابقة في المتصفح وعبر API.

اعرف ما لا يضيفه المولّد

تولّد هذه القدرة عن قصد width وinitial-scale فقط. ولا تضيف maximum-scale أو minimum-scale أو user-scalable أو viewport-fit أو interactive-widget أو أي توجيهات اختيارية أخرى، لأن هذه الإعدادات تحتاج إلى قرارات تخص المنتج وإمكانية الوصول وليست قيمًا افتراضية تلقائية. قد يؤدي تقييد التكبير خصوصًا إلى تصعيب استخدام المحتوى على من يحتاجون إلى تكبيره، ولذلك ينبغي ألا يضيف مولّد بسيط هذا السلوك بصمت. كذلك لا تدقق الأداة صفحة قائمة، ولا تكشف الوسوم المكررة، ولا تختبر نقاط التوقف المتجاوبة، ولا تثبت أن CSS نفسه متجاوب. إنها تنشئ ترميزًا حتميًا من الإعدادين المقدمين. بعد إضافة النتيجة، افحص الصفحة في المقاسات الضيقة والواسعة، وتأكد من بقاء النص مقروءًا ومن عدم تجاوز عناصر التحكم لحدودها، واختبر التكبير في متصفحات حقيقية. في المشاريع القائمة على القوالب، احتفظ بالتعريف في مكوّن head المشترك حتى تتلقى كل المسارات السياسة نفسها. الاستخدام التفاعلي في هذه الصفحة مجاني داخل المتصفح، أما طلب API الآلي فيكلف $0.002. ولأن المحلّل النقي نفسه يخدم المسارين، يمكنك نقل وسم اختبرته يدويًا إلى برنامج بناء من دون تغيير تنسيقه أو قواعد التحقق منه.

حالات الاستخدام

ابدأ صفحة متجاوبة

أنشئ تعريف device-width وinitial-scale القياسي لمستند HTML جديد أو لقالب تخطيط مشترك.

أنشئ تجهيزات اختبار حتمية

ولّد تعريف viewport رقميًا ثابتًا لاختبارات المتصفح التي تحتاج إلى عرض تخطيط صريح وقابل لإعادة الإنتاج.

وحّد مخرجات الإعداد

حوّل إعدادات نموذج أو برنامج نصي إلى وسم ثابت وحقول موحّدة منفصلة للتحقق واختبارات اللقطات.

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

ما العرض الذي ينبغي أن يستخدمه الموقع المتجاوب؟

استخدم device-width في حالة التصميم المتجاوب المعتادة. فهو يتبع عرض viewport للجهاز بوحدات بكسل CSS.

هل يمكنني إدخال عرض ثابت؟

نعم. أدخل رقمًا موجبًا مثل 375 من دون لاحقة وحدة. تُرفض القيم الصفرية والسالبة وغير المنتهية وغير الرقمية.

ما المقياس الابتدائي الذي ينبغي استخدامه؟

القيمة 1 هي الإعداد التقليدي الافتراضي. يُقبل رقم موجب ومنتهٍ آخر عندما يكون لمشروعك متطلب محدد.

هل تعطل النتيجة خاصية التكبير؟

لا. لا يضيف المولّد توجيهات user-scalable أو maximum-scale أو minimum-scale.

أين ينبغي وضع وسم meta؟

ضعه مرة واحدة داخل head في HTML. تجنب وجود عدة تعريفات viewport متنافسة في المستند نفسه.

ما تكلفة طلب API؟

يكلف كل طلب API ناجح $0.002؛ أما التنفيذ التفاعلي في هذه الصفحة فهو مجاني داخل المتصفح.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/web/viewport-meta-generate

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/web/viewport-meta-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"width":"device-width"}'

const res = await fetch("https://api.kit.forhosting.com/web/viewport-meta-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "width": "device-width"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/viewport-meta-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "width": "device-width"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/viewport-meta-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"width":"device-width"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"width":"device-width"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/viewport-meta-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "width": "device-width"
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.viewport_meta_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←