في الدراسة السابقة للواجهة الأمامية، كان فهم العلامات الوصفية هو هذه الجملة فقط.
<مجموعة محارف التعريف = UTF-8>
ولكن عند فتح أي موقع ويب، يوجد عمود من العلامات الوصفية في علامة الرأس الخاصة به. على سبيل المثال، لدينا موقع VeVb للفنون القتالية، لكني لست على دراية به، لذلك أضفت العلامة الوصفية إلى مقدمة الخطة الدراسية.
<اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، المقياس الأولي = 1.0، المقياس الأقصى = 1.0، الحد الأدنى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = لا>
هذا هو الأكثر استخدامًا، حيث تحدد تعليمات العرض والارتفاع العرض المنطقي والارتفاع لإطار العرض على التوالي. تكون قيمتها إما رقمًا بالبكسل أو رمز علامة خاصًا. يستخدم توجيه العرض علامة عرض الجهاز للإشارة إلى أن عرض إطار العرض يجب أن يكون عرض شاشة الجهاز. وبالمثل، يستخدم توجيه الارتفاع علامة ارتفاع الجهاز للإشارة إلى أن ارتفاع إطار العرض هو ارتفاع شاشة الجهاز.
يحدد التوجيه القابل للتوسيع من قبل المستخدم ما إذا كان يمكن للمستخدم تكبير إطار العرض، أي عرض صفحة الويب. تسمح القيمة "نعم" للمستخدم بالتكبير/التصغير، والقيمة "لا" لا تسمح بالتكبير/التصغير.
يتم استخدام توجيه المقياس الأولي لتعيين المقياس الأولي لصفحة الويب. تختلف قيمة القياس الأولية الافتراضية بين متصفحات الهواتف الذكية. عادةً ما يعرض الجهاز صفحة الويب بأكملها في المتصفح، وسيؤدي ضبطه على 1.0 إلى عرض مستند الويب بدون مقياس.
يتم استخدام توجيهات الحجم الأقصى والحد الأدنى لتعيين حد المستخدم لنسبة التكبير/التصغير لصفحة الويب. تتراوح القيم من 0.25 إلى 10.0. مثل المقياس الأولي، فإن قيمة هذه التوجيهات هي المقياس المطبق على محتويات إطار العرض.
تدعم جميع متصفحات الهواتف الذكية توجيهات العرض والتحجيم الخاصة بعلامة ViewPort <meta>. لكن Opera Mobile لا تستخدم التوجيه القابل للتوسيع بواسطة المستخدم، وبدلاً من ذلك تجادل بأن المستخدمين يجب أن يحتفظوا دائمًا بالقدرة على تكبير صفحات الويب في متصفحات الهاتف المحمول.
نادرًا ما يتم استخدام ما يلي. DevicePixelRatiowindow.devicePixelRatio هي نسبة وحدات البكسل الفعلية إلى وحدات البكسل المستقلة عن الجهاز (الانخفاضات) الموجودة على الجهاز. تعبير الصيغة هو: window.devicePixelRatio = وحدات البكسل/الانخفاضات الفعلية
شاشة موقع ويب ملائمة للشاشةإذا كانت قيمة المحتوى أقل من عرض الشاشة أو تساويه، فسيتم إيقاف تشغيل ملاءمة الشاشة التكيفية لموقع الويب مع امتداد المتصفح.
إذا كانت قيمة المحتوى أكبر من عرض الشاشة، فسيتم تمكين الملاءمة للشاشة
متصفح أبل ذات الصلة08/07/2015
<اسم التعريف=محتوى منفذ العرض=الحد الأدنى لواجهة المستخدم>
في Safari على نظام التشغيل iOS 7.1، تتم إضافة سمة واجهة المستخدم البسيطة إلى العلامة الوصفية، بحيث يمكن إخفاء شريط العناوين العلوي وشريط التنقل السفلي عند تحميل صفحة الويب.
<اسم التعريف=apple-mobile-web-app-capable content=yes>
يتم تعيين ما إذا كان سيتم تمكين وظيفة تطبيق الويب على نعم، وسيقوم موقع الويب بحذف شريط أدوات Apple الافتراضي وشريط القائمة في وضع ملء الشاشة.
<اسم التعريف=محتوى Apple-touch-ملء الشاشة=نعم>
تمكين الدعم لبرامج تطبيقات الويب
<اسم التعريف=محتوى اكتشاف التنسيق=الهاتف=لا><اسم التعريف=محتوى اكتشاف التنسيق=البريد الإلكتروني=لا />
سيقوم iPhone تلقائيًا بإضافة نمط رابط إلى النص الخاص بك، ثم انقر فوق الرقم لطلب الرقم تلقائيًا!
phone=no يتجاهل الأرقام الموجودة على الصفحة ويحددها كأرقام هواتف
phone=yes يقوم بتشغيل تحويل الأرقام إلى روابط الطلب الهاتفي ويتم تشغيله بشكل افتراضي!
<meta name=apple-mobile-web-app-status-bar-style content=default /><meta name=apple-mobile-web-app-status-bar-style content=black /><meta name=apple- mobile-web-app-status-bar-style content=black-translucent />
التحكم في نمط عرض شريط الحالة الافتراضي (أبيض) أسود (أسود) أسود شفاف (رمادي شفاف)
علامة الارتباط apple-touch-iconإذا تم تعيين apple-mobile-web-app-capable على نعم، فيمكنك استخدام زر "إضافة إلى الشاشة الرئيسية" لإضافة موقع الويب إلى الشاشة الرئيسية على iPhone وiPad وiTouch Safari.
من خلال تعيين علامة apple-touch-icon المقابلة، ستستخدم الأيقونة المضافة إلى الشاشة الرئيسية الصورة التي حددناها.
ما يلي هو تحديد الرمز الأمثل لأجهزة ox المختلفة. الحجم الافتراضي لجهاز iPhone هو 60 بكسل، وجهاز iPad هو 76 بكسل، ويتم ضرب شاشة Retina مرتين.
<link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon الأحجام=76×76″ href=touch-icon-ipad.png><link rel=apple- أحجام أيقونات اللمس=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon الأحجام=152×152″ href=touch-icon-ipad-retina.png>
قبل iOS7، كان النظام يضيف تأثيرات خاصة (زوايا مستديرة وإبرازات) إلى الأيقونات بشكل افتراضي. إذا كنت لا تريد أن يضيف النظام تأثيرات خاصة، فيمكنك استخدام apple-touch-icon-precompose.png بدلاً من apple-touch-. icon.png.
أولوية استخدام الأيقونة هي كما يلي:إذا لم يكن هناك رمز يطابق الحجم الموصى به للجهاز المقابل، فسيتم استخدام الرمز الأكبر من الحجم الموصى به ولكنه الأقرب إلى الحجم الموصى به أولاً.
إذا لم تكن هناك أيقونات أكبر من الحجم الموصى به، فسيتم اختيار الرمز الأقرب إلى الحجم الموصى به أولاً.
إذا كان هناك العديد من الرموز التي تلبي الحجم الموصى به، فسيتم تحديد الرمز الذي يحتوي على الكلمة الأساسية المركبة مسبقًا أولاً.
إذا لم تحدد رمزًا باستخدام علامة الارتباط في المنطقة، فسيتم البحث تلقائيًا عن أيقونات png مسبوقة برمز apple-touch-icon في الدليل الجذر لموقع الويب.
ملاحظة: لم يعد نظام التشغيل ios7 يضيف تأثيرات خاصة إلى الأيقونات قبل نظام التشغيل ios7، كانت تتم إضافة تأثيرات خاصة إلى الأيقونات بشكل افتراضي ما لم تكن الأيقونة تحتوي على الكلمة الأساسية -precompose.png كلاحقة. إنترنت إكسبلورر <meta http-equiv=X-UA-Compatible content=IE=edge> منع IE من استخدام وضع التوافق
<meta name=MobileOptimized content=320″> علامة عرض التعريف التي تم تعيينها بواسطة Microsoft لإصدار IE Mobile
لن يقوم المتصفح بضبط حجم الملف تلقائيًا، مما يعني أنه بحجم ثابت ولن يتم توسيعه أو تغيير حجمه مع المتصفح.
<meta name=HandheldFriendly content=true /> : ما إذا كان مناسبًا للأجهزة المحمولة، صحيح أم خطأ فقط
<meta name=screen-orientation content=portrait> فرض الشاشة العمودية
<meta name=full-screen content=yes> فرض ملء الشاشة
<meta name=browsermode content=application> وضع التطبيق
<meta name=x5-orientation content=portrait> فرض الشاشة العمودية
<meta name=x5-fullscreen content=true> فرض ملء الشاشة
<meta name=x5-page-mode content=app> وضع التطبيق
<meta name=renderer content=webkit> تمكين الوضع السريع
يشير التعريف إلى العنصر الذي يوفر معلومات تعريفية حول الصفحة، مثل الأوصاف والكلمات الرئيسية لمحركات البحث وتكرار التحديث. توجد العلامة في رأس المستند ولا تحتوي على أي محتوى. تحدد خصائص العلامة أزواج الاسم/القيمة المرتبطة بالمستند.
ما هي الميزات الفريدة لنسخة الهاتف المحمول؟<محتوى التعريف = العرض = عرض الجهاز، المقياس الأولي = 1.0، الحد الأقصى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = 0 اسم = منفذ العرض> <محتوى التعريف = نعم اسم = Apple-mobile-web-app-capable> <meta المحتوى = الاسم الأسود = apple-mobile-web-app-status-bar-style> <محتوى التعريف = الهاتف = لا يوجد اسم = اكتشاف التنسيق>
العلامة الوصفية الأولى تعني: إجبار عرض المستند على عرض الجهاز ليظل 1:1، والحد الأقصى لنسبة عرض المستند هو 1.0، ولا يُسمح للمستخدمين بالنقر على الشاشة لتكبير العرض؛
العلامة الوصفية الثانية هي علامة التعريف الخاصة بـ Safari في جهاز iPhone، والتي تعني: السماح بالتصفح في وضع ملء الشاشة؛
العلامة الوصفية الثالثة هي أيضًا علامة خاصة لجهاز iPhone، والتي تحدد نمط شريط الحالة أعلى Safari في iPhone؛
لون شريط الحالة (الشريط العلوي من الشاشة) في تطبيقات تطبيقات الويب؛
القيمة الافتراضية هي القيمة الافتراضية (أبيض)، والتي يمكن ضبطها على الأسود (أسود) والأسود الشفاف (الرمادي الشفاف).
ملاحظة: إذا كانت القيمة سوداء شفافة، فسوف تشغل موضع px للصفحة وتطفو فوق الصفحة (وسوف تغطي ارتفاع 20px للصفحة - شاشة Retina لجهاز iphone4 وitouch4 هي 40px).العلامة الوصفية الرابعة تعني: اطلب من الجهاز أن يتجاهل الأرقام الموجودة في الصفحة كأرقام هواتف.
دعونا نلقي نظرة على التعريف لصفحات الجوال الخاصة بالشركات المصنعة الكبرى: 1. تمال<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><meta name=format-detection content=telephone=no, Address=no>2. تاوباو
<meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= لا يوجد اسم=كشف التنسيق/> <اسم التعريف=محتوى تكوين التطبيق=ملء الشاشة=نعم،استخدامHistoryState=نعم،الانتقال=نعم/><اسم ميتا=منفذ العرض المحتوى = المقياس الأولي = 0.5، الحد الأقصى للمقياس = 0.5، الحد الأدنى للمقياس = 0.5، قابل للتحجيم بواسطة المستخدم = لا>3. جينجدونج
<title>إصدار Jingdong-Mobile</title><meta name=viewport content=width=device-width, الأولي-مقياس=1.0, الحد الأقصى للمقياس=1.0, user-scalable=0;><meta http-equiv=Content -اكتب المحتوى=نص/html; name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=محتوى انتهاء الصلاحية=-1><meta http-equiv= محتوى التحكم في ذاكرة التخزين المؤقت=لا يوجد ذاكرة تخزين مؤقت><meta http-equiv=محتوى براغما=لا يوجد ذاكرة تخزين مؤقت><اسم ميتا=محتوى الكلمات الرئيسية=><اسم ميتا=محتوى الوصف=>4. نيتياس
<title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, الحد الأقصى للمقياس=1, الحد الأدنى للمقياس=1, المستخدم قابل للتحجيم=لا><محتوى ميتا = هاتف=لا يوجد اسم=اكتشاف التنسيق /><اسم التعريف=محتوى الكلمات الرئيسية= /><اسم ميتا=محتوى الوصف= />5. بايدو
<اسم التعريف=المحتوى المرجعي=دائمًا><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta الاسم = محتوى اكتشاف التنسيق = الهاتف = لا>6. سوهو
<title>Mobile Sohu.com</title> <meta http-equiv=Content-Type content=text/html; اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، قابل للتحجيم بواسطة المستخدم = لا، المقياس الأولي = 1.0، المقياس الأقصى = 1.0، الحد الأدنى للمقياس = 1.0 /><meta الاسم=المحتوى الأمثل للجوال=320/><اسم التعريف=محتوى الوصف= /><اسم التعريف=محتوى الكلمات الرئيسية= />
----
محاكاة صفحة الويب للجوال<اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، قابل للتحجيم بواسطة المستخدم = لا، المقياس الأولي = 1.0، المقياس الأقصى = 1.0، الحد الأدنى للمقياس = 1.0 ″>
منفذ العرض -> النافذة (منطقة العرض)
العرض = عرض الجهاز عرض الجهاز
إطار العرض<metaname = 'viewport'content = width=320><metaname = 'viewport'content = width=device-width>
user-scalable=no/0 ما إذا كان سيتم السماح بالقياس
المقياس الأولي = 1.0 القيمة الأولية
الحد الأقصى للمقياس = 1.0
الحد الأدنى للمقياس = 1.0
-----------------------
<اسم التعريف=محتوى منفذ العرض=العرض=عرض الجهاز، قابل للتحجيم بواسطة المستخدم=لا>
user-scalable=no/0 يعطل المستخدمين من توسيع نطاق الصفحة
<اسم التعريف=محتوى منفذ العرض=العرض=عرض الجهاز، قابل للتحجيم بواسطة المستخدم=لا، المقياس الأولي=1.0″>
المقياس الأولي = 1.0 تهيئة نسبة تكبير الصفحة
<اسم التعريف=محتوى منفذ العرض=العرض=عرض الجهاز، المقياس الأولي=1.0، المقياس الأقصى=1.0، قابل للتحجيم بواسطة المستخدم=0″>
الحد الأقصى للمقياس = 1.0 الحد الأقصى لنسبة القياس (للهواتف المحمولة الفردية Huawei Meta8)
-----------------------
التعريف الخاص بجهاز Apple:<!—السماح بتشغيل صفحات الويب كتطبيقات (السماح بالإضافة إلى الشاشة الرئيسية)—><meta name=apple-mobile-web-app-capable content=yes><!—لون شريط الحالة—><meta name=apple- mobile -web-app-status-bar-style content=black>جينجدونج ميتا:
< اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، المقياس الأولي = 1.0، الحد الأقصى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = 0 ">< اسم التعريف = محتوى قابل للتطبيق على الويب من Apple = نعم >< meta name=apple-mobile-web-app-status-bar-style content=black><!—أرقام الهواتف وعناوين البريد الإلكتروني المحظورة—><meta name=format-detection المحتوى = الهاتف = لا، البريد الإلكتروني = لا>التعريف تاوباو:
<meta content=yes name=apple-mobile-web-app-capable><!–انقر فوق منطقة الصفحة لعرضها في وضع ملء الشاشة —><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =no,email =no name=format-detection/><!–معلومات التطبيق، الاحتفاظ بسجل النظام، تأثيرات الحركة–><meta name=محتوى تكوين التطبيق=ملء الشاشة=yes,useHistoryState=yes,transition=yes/>التعريف الآخر:
<!–إجبار متصفح 360 على استخدام chrome kernel لعرض الصفحة–><meta name=renderer content=webkit><!–حاول استخدام أحدث وضع في IE للعرض–><meta http-equiv=X-UA -محتوى متوافق=IE= edge><!–مُحسّن للأجهزة المحمولة، بشكل أساسي لبعض المتصفحات القديمة التي لا تتعرف على منافذ العرض، مثل BlackBerry–><meta name=HandheldFriendly content=true><!–متصفح Microsoft القديم–><meta name=MobileOptimized content=320″><!– uc يفرض شاشة عمودية–><meta name=screen-orientation content=portrait><!– QQ يفرض شاشة عمودية –><اسم التعريف=محتوى اتجاه x5=صورة><!– UC تفرض ملء الشاشة–><اسم التعريف=محتوى ملء الشاشة=نعم><!– يفرض QQ ملء الشاشة–><اسم التعريف=محتوى ملء الشاشة x5=صحيح><!– وضع تطبيق UC–><اسم التعريف=محتوى وضع المتصفح=تطبيق><!– وضع تطبيق QQ–><اسم التعريف=x5-صفحة- محتوى الوضع = التطبيق>تلخيص
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة، وآمل أن يكون لمحتوى هذه المقالة قيمة مرجعية معينة لدراسة أو عمل الجميع. إذا كان لديك أي أسئلة، يمكنك ترك رسالة للتواصل شبكة.