اذهب إلى المحتوى
  • 0

استفسار حول العنصر <meta> من لغة HTML

dia_1805

السؤال

Recommended Posts

  • 0

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

وهناك العديد من الأنواع المختلفة من عناصر meta، ولكل نوع attribute أو سمة مختلفة، أي يختلف العنصر بإختلاف السمة، ونكتب كل سمة بشكل منفصل أي لانضع كل السمات في عنصر meta واحد.

بمعنى:

  • name: سمة "الاسم" تحدد اسم الخاصية التي يصفها عنصر "ميتا".
  • viewport: اسم خاص يحدد كيفية عرض محتوى صفحة الويب في منفذ عرض.
  • content: سمة "المحتوى" تحدد قيمة الخاصية.

width=device-width تحدد تلك القيمة عرض محتوى صفحة الويب بعرض الجهاز الذي يعرضها.

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

أي يضمن الكود عرض المنفذ عرض محتوى موقع الويب بشكل صحيح على أجهزة مختلفة، بغض النظر عن دقة الشاشة أو حجمها.

بشكل أبسط نسبة العرض للإرتفاع متساوية ليتم ملائمة طول الشاشة مهما كان عند عرض صفحة الموقع لأول مرة، ويظهر الموقع بشكل طبيعي على أجهزة الهاتف دون تكبير أو تصغير، فلو قمتي بعمل zoom على شاشة هاتفك ستجدي أن الموقع يتم تكبيره لكن قيمة 1 تعني أن الموقع سيتم عرضه بدون تكبير أي بشكله الطبيعي.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

العنصر meta هو عنصر يستخدم في صفحات الويب للتحكم في خصائص العرض على مختلف الشاشات 

"name="viewport : يستخدم في صفحات الويب لتعريف كيفية عرض المحتوى على الشاشة. يمكن استخدامه لتعيين العرض الأولي (initial-scale) والحد الأدنى والأقصى للتكبير (minimum-scale و maximum-scale) وما إذا كان المستخدم يمكنه التكبير والتصغير يدويًا (user-scalable). هذا يساعد في جعل تجربة المستخدم أفضل وأكثر تناسبًا مع مختلف أحجام الشاشات.

"content="width=device-width :تعني أن عرض الصفحة يجب أن يكون مساويًا لعرض شاشة الجهاز. هذا يسمح بتناسب المحتوى مع عرض الشاشة بشكل جيد، سواء كانت على هاتف محمول أو جهاز لوحي أو شاشة كبيرة.

initial-scale=1.0 يحدد مستوى التكبير الافتراضي لصفحة الويب عند تحميلها. بمعنى آخر، يُعرض المحتوى بحجمه الطبيعي دون تكبير أو تصغير إضافي.

بالتوفيق لك 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مرحبا ليدية
سوف  نقسم الكود الذي قدم
اولا meta هو اداة توفر بعض المعلومات الاضافية حول صفحة الويب
يستخدم مع  meta  عنصر name وهو نوع المعلومة التي يقدمها عنصر ال meta لصفحة الويب وهنا استخدم viewport يعني يقدم معلومة عرض صفحة الويب  "content="width=device-width, initial-scale=1.0 هنا يتم تعيين محتوى القيمة للـ viewport يتم تعيين width=device-width ليكون عرض الصفحة متساوي مع عرض جهاز المعروض علية الصفحة  و initial-scale=1.0 يحدد مستوى التكبير عند تحميل الصفحة ويضمن أن تكون الصفحة تبدأ بالتكبير بنسبة 1.0 وهذا يوفر انه الصفحة لا تكون مكبرة او مصغره
في النهاية هذه السطر يوفر لي انه عرض الصفحة يكون متناسق مع اختلاف شاشات الاجهزة المتعددة التي تظهر عليها الصفحة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 1 ساعة قال Mustafa Suleiman:

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

وهناك العديد من الأنواع المختلفة من عناصر meta، ولكل نوع attribute أو سمة مختلفة، أي يختلف العنصر بإختلاف السمة، ونكتب كل سمة بشكل منفصل أي لانضع كل السمات في عنصر meta واحد.

بمعنى:

  • name: سمة "الاسم" تحدد اسم الخاصية التي يصفها عنصر "ميتا".
  • viewport: اسم خاص يحدد كيفية عرض محتوى صفحة الويب في منفذ عرض.
  • content: سمة "المحتوى" تحدد قيمة الخاصية.

width=device-width تحدد تلك القيمة عرض محتوى صفحة الويب بعرض الجهاز الذي يعرضها.

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

أي يضمن الكود عرض المنفذ عرض محتوى موقع الويب بشكل صحيح على أجهزة مختلفة، بغض النظر عن دقة الشاشة أو حجمها.

بشكل أبسط نسبة العرض للإرتفاع متساوية ليتم ملائمة طول الشاشة مهما كان عند عرض صفحة الموقع لأول مرة، ويظهر الموقع بشكل طبيعي على أجهزة الهاتف دون تكبير أو تصغير، فلو قمتي بعمل zoom على شاشة هاتفك ستجدي أن الموقع يتم تكبيره لكن قيمة 1 تعني أن الموقع سيتم عرضه بدون تكبير أي بشكله الطبيعي.

مفهوم، شكرا جزيلا بارك الله فيك

بتاريخ 1 ساعة قال Najah Alsaker:

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

العنصر meta هو عنصر يستخدم في صفحات الويب للتحكم في خصائص العرض على مختلف الشاشات 

"name="viewport : يستخدم في صفحات الويب لتعريف كيفية عرض المحتوى على الشاشة. يمكن استخدامه لتعيين العرض الأولي (initial-scale) والحد الأدنى والأقصى للتكبير (minimum-scale و maximum-scale) وما إذا كان المستخدم يمكنه التكبير والتصغير يدويًا (user-scalable). هذا يساعد في جعل تجربة المستخدم أفضل وأكثر تناسبًا مع مختلف أحجام الشاشات.

"content="width=device-width :تعني أن عرض الصفحة يجب أن يكون مساويًا لعرض شاشة الجهاز. هذا يسمح بتناسب المحتوى مع عرض الشاشة بشكل جيد، سواء كانت على هاتف محمول أو جهاز لوحي أو شاشة كبيرة.

initial-scale=1.0 يحدد مستوى التكبير الافتراضي لصفحة الويب عند تحميلها. بمعنى آخر، يُعرض المحتوى بحجمه الطبيعي دون تكبير أو تصغير إضافي.

بالتوفيق لك 

شكرا

بتاريخ منذ ساعة مضت قال Mahmoud Hassan19:

مرحبا ليدية
سوف  نقسم الكود الذي قدم
اولا meta هو اداة توفر بعض المعلومات الاضافية حول صفحة الويب
يستخدم مع  meta  عنصر name وهو نوع المعلومة التي يقدمها عنصر ال meta لصفحة الويب وهنا استخدم viewport يعني يقدم معلومة عرض صفحة الويب  "content="width=device-width, initial-scale=1.0 هنا يتم تعيين محتوى القيمة للـ viewport يتم تعيين width=device-width ليكون عرض الصفحة متساوي مع عرض جهاز المعروض علية الصفحة  و initial-scale=1.0 يحدد مستوى التكبير عند تحميل الصفحة ويضمن أن تكون الصفحة تبدأ بالتكبير بنسبة 1.0 وهذا يوفر انه الصفحة لا تكون مكبرة او مصغره
في النهاية هذه السطر يوفر لي انه عرض الصفحة يكون متناسق مع اختلاف شاشات الاجهزة المتعددة التي تظهر عليها الصفحة

شكرا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...