CSS

CSS Responsive Viewport
نافذة عرض المستخدم في لغة CSS

سوف تتعلم في هذا الدرس نافذة عرض المستخدم في لغة CSS وهو جزء من صفحة الويب يظهر بعرض أو بحجم شاشة الأجهزة المختلفة [large screen - Desktop - laptop - tablet - phones].

التاريخ

05 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1889

المواضيع

24
الشروحات chevron_left CSS Responsive Viewport chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Responsive Viewport
نافذة عرض المستخدم في لغة CSS

</> CSS Responsive Viewport
نافذة عرض المستخدم في لغة CSS

viewport هو المساحة أو الجزء الذي يظهر فقط من صفحة الويب علي أجهزة المستخدمين هذا الجزء يساوي عرض شاشة المستخدم, viewport = screen width.
  • viewport علي شاشة computer هي بعرض شاشة الكمبيوتر و viewport علي شاشة phone هي بعرض شاشة phone.


كانت صفحات الويب قديماً مصممة فقط لأجهزة الكمبيوتر فقط فكان يجب علي المستخدم عند تصفح صفحات ويب من أجهزة صغيرة بالقيام بسحب scroll أفقي يميناً ويساراً لكي يتصفح محتوي صفحة الويب, ,والأن عن طريق viewport أصبح الأمر سهلاً مطورين مواقع الويب لديهم طريقة لمعرفة حجم الشاشة الحالي وبناء عليه تتمدد صفحة الويب ويكون لها عرض = عرض viewport تماماً.


عندما تتمدد صفحة الويب وتكون بعرض الشاشة فقط أين تذهب عناصر صفحة الويب وما الزي يحدث لها؟ جميع العناصر تكون أسفل بعضها لبعض وتسمي هذة العملية wrapping عند تصغير الشاشة فكل عنصر ليس له مكان في هذا الصف يتم ترحيله الي صف جديد.


</> HTML add viewport web page
إضافة viewport لصفحة الويب عن طريق HTML

خطوات إضافة viewport لصفحة الويب:

  • يتم إضافة عنصر meta tag بداخل عنصر head لأي صفحة ويب.
  • إضافة خاصية name لعنصر meta tag بالقيمة viewport ليصبح بهذا الشكل name="viewport".
  • إضافة خاصية content لعنصر meta tag بالقيمة "width="device-width, initial-scale=1 ليصبح بهذا الشكل "content="width=device-width, initial-scale=1.


عنصر meta tag مع viewport يخبر المتصفح أن wrapping تلتف العناصر بحسب حجم الشاشة width=device-width تتمدد العناصر للأسفل في صفوف أو سطور جديدة عندما لا توجد مساحات لها داخل viewport كل شاشة لها عرض مختلف لعناصر صفحة الويب.


initial-scale=1.0 هي خاصة بتحديد القيمة الأولية التي سوف تعتمد عليها صفحة الويب عندما تقوم بالتحميل اول مرة.



HTML add viewport to web page

إضافة viewport لصفحة الويب بلغة HTML.

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

</> CSS viewport rules
قواعد viewport في لغة CSS

يجب مراعاة عدم ظهور scroll أفقياً لصفحات الويب الناتج عن طفح المحتوي خارج حدود viewport والذي يؤي في النهاية إلي تجربة مستخدم سيئة.


هناك بعض القواعد التي يجب اتباعها لتحسين تجربة المستخدم مع viewport:

1. لا تستخدم عناصر كبيرة ثابتة العرض:

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


2. لا تدع المحتوى يعتمد على عرض viewport  معين حتى يتم عرضه جيدًا:

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


3. استخدم خصائص CSS لتطبيق أنماط مختلفة للشاشات الصغيرة والكبيرة:

سيؤدي تعيين عرض CSS مطلقة كبيرة لعناصر الصفحة إلى جعل العنصر عريضًا جدًا بالنسبة لإطار العرض viewport  على جهاز أصغر. بدلاً من ذلك ، جرب استخدام قيم العرض النسبية ، مثل width: 100%. احذر أيضًا من استخدام قيم تحديد المواقع المطلقة الكبيرة. قد يتسبب ذلك في  خروج العنصر خارج إطار العرض على الأجهزة الصغيرة.


مصطلحات الدرس
Viewport
Viewport

منفذ العرض / شكل العرض

Device
Device

جهاز

Width
Width

عرض

Scale
Scale

مقياس

Initial
Initial

مبدئي

Size
Size

حجم

Content
Content

محتوي

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.