تقدم هذه المقالة بشكل رئيسي علامة Viewport وتحليل استخدام CSS ذات الصلة في HTML5 Mobile Development. غالبًا ما يطلق على المنفذ عرض المنافذ أو عرض العرض ، ويلعب دورًا مهمًا في تخطيط الأجهزة المحمولة والتكيف على الشاشة. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
إن Powerport (Viewport) المذكورة عادة في الواجهة الأمامية للهاتف المحمول هي منطقة الشاشة حيث يعرض المتصفح محتوى الصفحة. العديد من المفاهيم المهمة المعنية هي العلاقة بين DIP (منطق جهاز البكسل المستقل عن الجهاز) وبكسلات CSS. هنا نفهم أولاً المفاهيم التالية.
تصميم التصميمبشكل عام ، تقوم المتصفحات على الأجهزة المحمولة بتعيين علامة META Viewport بشكل افتراضي ، وتحديد منفذ عرض التخطيط الظاهري لحل مشكلة عرض الصفحة المبكرة على الهواتف المحمولة. ضبط iOS و Android بشكل أساسي دقة منفذ العرض هذا على 980 بكسل ، بحيث يمكن تقديم صفحات الويب الموجودة على الكمبيوتر على الهاتف بشكل أساسي ، لكن العناصر تبدو صغيرة جدًا ، ويمكن عمومًا تحجيم صفحات الويب يدويًا بشكل افتراضي.
منفذ العرض المرئي والبكسل المادييوفر Visual Viewport (Visual Viewport) المساحة المرئية للشاشة الفعلية ، والبكسل الفعلي لشاشة الشاشة ، ونفس حجم الشاشة ، والجهاز بكثافة بكسل عالية ، وسيكون وحدات البكسل للأجهزة أكثر. على سبيل المثال ، البكسلات المادية لجهاز iPhone:
iPhone5: 640 * 1136
iPhone 6: 750 * 1334
iPhone6 Plus: 1242 * 2208
إمكانية عرض مثالية و DIP (وحدات البكسل المنطقية)
عادةً ما نسميها في إطار العرض. ما نسميه دقة الشاشة.
Dip (Pixel Pixel) لا علاقة له ببكسل الأجهزة للجهاز. يشغل Dip نفس المساحة على شاشة جهاز من أي كثافة بكسل.
على سبيل المثال ، تكون وحدات البكسل للأجهزة الخاصة بشاشة شاشة Retina لشاشة MacBook Pro هي: 2880 * 1800. عندما تقوم بتعيين دقة الشاشة إلى 1920 * 1200 ، تكون قيمة عرض إطار العرض المثالي هي 1920 بكسل ، وقيمة عرض DIP هي 1920. نسبة بكسل الجهاز هي 1.5 (2880/1920). العلاقة بين عرض البيكسل المنطقي وعرض البكسل المادي (دقة البكسل) للجهاز تفي بالصيغة التالية:
عرض البكسل المنطقي *التكبير = عرض البكسل الفعليعادة ما لا يُسمح بدقة شاشة الهاتف المحمول. إنها عمومًا قيمة ثابتة تحددها الشركة المصنعة للأجهزة افتراضيًا. بمعنى آخر ، فإن قيمة DIP هي قيمة منفذ العرض المثالي (أي الدقة). على سبيل المثال ، دقة شاشة iPhone:
iPhone5: القرار 320*568 ، البكسلات المادية 640*1136 ، @2x
iPhone6: القرار 375*667 ، وحدات البكسل المادية 750*1334 ، @2x
iPhone6 Plus: القرار 414 * 736 ، البكسلات المادية 1242 * 2208 ، @3x ، (لاحظ أن نسبة الصورة المعروضة الفعلية يتم تقليلها إلى 1080 × 1920 ، وسيتم تقديم الأسباب المحددة في نهاية مقالتنا)
بكسل CSSوحدات CSS وحدات (PX) المستخدمة لتخطيط الصفحة. يتم تحديد حجم البكسل للنمط (على سبيل المثال العرض: 100px) في بكسل CSS. نسبة بكسل CSS إلى DIP هي نسبة التحجيم لصفحة الويب. إذا لم تكن صفحة الويب متوسعة ، فإن بكسل CSS يتوافق مع DIP (Pixel منطق الجهاز).
استخدم علامة META Viewport للتحكم في التصميم
أولاً ، دعونا نلقي نظرة على الخصائص المتطرفة لعلامة Meta Viewport:
CSS رمز نسخ المحتوى إلى الحافظة