ما هو Viewport
تضع متصفحات الهاتف المحمول الصفحة في نافذة افتراضية (عرض عرض). عادةً ما تكون النافذة الافتراضية (Viewport) أوسع من الشاشة ، بحيث لا يتعين على كل صفحة ويب الضغط على كل صفحة ويب في نافذة صغيرة جدًا (سيؤدي ذلك إلى تدمير تخطيط صفحة الويب التي لم يتم تحسينها لمتصفحات الهاتف المحمول). يمكن للمستخدمين رؤية أجزاء مختلفة من صفحة الويب من خلال التقويم والتكبير. قدمت النسخة المحمولة من Safari Browser مؤخرًا علامة Meta of Viewport ، والتي تسمح لمطوري الويب بالتحكم في حجم وتكبير المنافذ ، ومتصفحات الهاتف المحمول الأخرى التي تدعمها بشكل أساسي.
عرض أساسيات المنفذ
إن علامة Meta Meta View of the Page الشائعة الاستخدام المحسّنة لصفحات الويب المحمولة هي على النحو التالي:
<name meta = viewport content = width = width device ، sciale scale = 1 ، maximum scale = 1 ″>
العرض: يتحكم في حجم منفذ العرض ، والذي يمكن تحديده إذا كان 600 ، أو قيمة خاصة ، مثل عرض الجهاز ، هو عرض الجهاز (وحدات البكسلات من CSS عند تحجيمها إلى 100 ٪.
الارتفاع: يتوافق مع العرض ، حدد الارتفاع.
النطاق الأولي: التحجيم الأولي ، أي نسبة التحجيم عند تحميل الصفحة لأول مرة.
الحد الأقصى على نطاق: الحد الأقصى للمقياس الذي يسمح للمستخدم بالتوسيع.
الحد الأدنى على نطاق: الحد الأدنى للمقياس الذي يسمح للمستخدم بالتوسيع.
قابل للقلق من المستخدم: هل يمكن للمستخدم توسيع نطاقًا يدويًا
بعض الأسئلة حول عرض المنفذ
لا تعد Viewport مجرد سمة فريدة من نوعها على iOS ، ولكنها أيضًا موقع عرض على Android و WinPhone. المشكلة التي يرغبون في حلها هي نفسها ، أي تجاهل الدقة الحقيقية للجهاز ومن خلال DPI مباشرة ، وإعادة ضبط الدقة بين الحجم المادي والمتصفح ، والتي لا علاقة لها بدقة الجهاز. على سبيل المثال ، يمكنك الحصول على iPhone3 GS مع 3.5 بوصة 320 * 480 ، و iPhone4 مع 3.5 بوصة 640 * 960 ، و iPhone4 مع 9.7 بوصة-1024 * 768 ، و iPad2 مع قرارات مختلفة وأحجام فعلية ، يمكنك تعيين منفذ العرض لجعل نفس القرار في البروز. على سبيل المثال ، يبلغ عرض موقع الويب الخاص بك 800 بكسل ، يمكنك تعيين العرض = 800 من Viewport لجعل موقع الويب الخاص بك يعرض موقع الويب الخاص بك على هذه الأجهزة الثلاثة المختلفة فقط بملء الشاشة.
أعتقد أن كل طالب لديه فهم قليل للمنتور كان ينبغي أن يفهم بالفعل المعرفة المذكورة أعلاه. ليست هذه هي النقطة التي أريد التحدث عنها اليوم. ما أريد توضيحه هو بعض الاختلافات في أداء منفذ العرض على iOS و Android.
عند البحث عن المعرفة عبر الإنترنت حول عرض Viewport ، فهي في الأساس جميع المعلومات التالية:
<meta name = viewport content = width = width device ، sciale scial = 1.0 ، maximum scale = 1.0 ، minimate-scale = 1.0 ، ster-scalable = no />
يعني هذا الرمز أن عرض منفذ العرض يساوي الدقة الحقيقية على الجهاز الفعلي ولا يسمح للمستخدم بالتوسيع. هذه هي الطريقة التي يتم بها تعيين تطبيقات الويب الرئيسية في Yidu. تتمثل وظيفتها في التخلي عن عمداً وعدم توسيع نطاق الصفحة. وبهذه الطريقة ، يجب أن يكون DPI هو نفسه الدقة الحقيقية على الجهاز. بدون أي تحجيم ، ستظهر صفحة الويب أعلى وأكثر حساسية. يجب أن يعرف الطلاب الذين يلعبون PS ما الذي سيصبح عند تكبير صورة 1000 * 1000 مباشرة إلى 500 * 500 نقطة ، أليس كذلك؟ يجب عدم هروب تشويه الصورة.
لكن التطبيق الذي أريد القيام به هو عكس ذلك ، ويحتاج إلى استخدام منفذ العرض والتكبير. بغض النظر عن الدقة الحقيقية أو ما هو الحجم المادي ، آمل أن يكون هناك دقة موحدة في المتصفح ، ولن يُسمح للمستخدم بالتكبير. الأجهزة التي اعتدت اختبارها هي: iPhone4 ، iPad2 ، HTC G11 ، Aquos Phone (Android System) ، Asus Android Pad ، Dell Winphone ، واجهت المشكلات التالية على طول الطريق:
1) إذا تم تعيين منفذ العرض بدون عرض ، فإن العرض الافتراضي هو 980. إذا كانت جميع عناصر الصفحة أقل من 980 ، فإن العرض هو 980. إذا تجاوز عرض الصفحة 980 ، فإن العرض يساوي الحد الأقصى للعرض. باختصار ، يمكن عرض الصفحة بأكملها من اليسار إلى اليمين افتراضيًا. إذا قمت بتعيين منفذ العرض ، على سبيل المثال ، فقط قم بتعيين قابلة للتطبيق من قبل المستخدم = لا ، على سبيل المثال <name meta = content content = user-scalable = no /> ، فإن العرض تحت iOS سيظل يتم عرضه عند 980 (أي ، سيتم تحجيمه بواسطة DPI بشكل افتراضي) ، ولكن لن يتم تحجيمه تحت Android و Winphone و Browser ، وتوسيع نطاقه.
2) بالنسبة لأجهزة iOS ، يمكن أن يكون عرض الإعداد مفعولًا ، ولكن لن يكون عرض الروبوت ساري المفعول. يتم حساب نسبة التحجيم لـ DPI تلقائيًا حسب العرض الذي تقوم بتعيينه والدقة الحقيقية التي تحددها. ومع ذلك ، في Android ، يمكنك تعيين العرض غير صالح. ما يمكنك تعيينه هو حقل خاص الكثافة الهدف ، أي أن هناك ثلاثة متغيرات: عرض المتصفح ، والعرض الحقيقي للجهاز ، و DPI. دعنا ببساطة نستخدم صيغة للتعبير عن العلاقة بينها (وليس العلاقات الحقيقية ، فقط استخدمها للحصول على تفسير موجز) عرض حقيقي * DPI = عرض المتصفح ، هنا المتغيرات الثلاثة ، العرض الحقيقي هو قيمة معروفة لا يمكننا تشغيلها ، ويمكننا تعيين أحد المتغيرات الأخرى للتأثير على الآخر. في iOS ، ما يمكننا تغييره هو عرض المتصفح ، يتم إنشاء DPI تلقائيًا ، وفي Android ، ما يمكننا تغييره هو DPI ، ويتم إنشاء عرض المتصفح تلقائيًا. بالنسبة إلى Android ، بغض النظر عن كيفية تحديد العرض ، لن يكون له تأثير على عرض المتصفح.
PS: هنا سأتحدث عن مشكلة غريبة أخرى: في HTC's G11 (لدي هذا فقط لهاتف HTC ، ولا توجد اختبارات أخرى) ، إذا تم تعيين DPI دون عرض العرض ، فإن المستخدم القابل للعلاج (لا لا ، لا يتم إدخاله ، وهذا هو ،: نحن بحاجة إلى ضبط قيمة العرض بشكل واضح. على الرغم من أن هذه القيمة لا يكون لها أي تأثير على دقة شاشة المتصفح تحت Android (ستظل لها تأثير على iOS) ، إلا أننا ما زلنا بحاجة إلى ضبطها ، ويجب أن تكون هذه القيمة أكبر من 320. تظهر هذه المشكلة فقط على هاتف G11 الخاص بـ HTC ، ولا توجد مشكلة من هذا القبيل على هاتف Aquos. متوافق مع Android هو حقا صداع @_ @. لا أعرف عدد المزالق التي ستكون في المستقبل. على هاتف WinPhone ، تكون النتيجة أكثر غرابة: لقد حددت قيمة أكبر من 480 لعرض منفذ العرض ، وسوف تفشل قابلة للمعارض = لا. إذا كانت قيمة أقل من 480 ، فسيصبح المفعول للمستخدم = لا. ولكن بغض النظر عن مقدار القيمة التي قمت بتعيين عرض منفذ العرض ، فإنه ليس له تأثير على العرض الحقيقي الذي يعرضه WinPhone ، كما أنه ليس له تأثير من خلال الكثافة الهدف. العرض المحدد ، إذا كان أقل من 480 ، فستكون الشاشة تصغير ، لكن حجم التخفيض يختلف تمامًا عما كنت أتوقعه. لا أعرف ما هي القاعدة التي يتم تكبيرها. لا أعرف ما إذا كانت هذه مشكلة مع WinPhone أو مشكلة في تطبيق Dell.
3) يجب أن تكون هذه المقالة مرتبطة مباشرة بالمقالة السابقة: عندما يكون جهاز iOS أفقيًا ورأسيًا ، فإنه سيعدل DPI تلقائيًا. سواء أكان ذلك أفقيًا أو عموديًا ، يمكن أن يضمن أن عرض المتصفح يساوي القيمة المحددة في منفذ العرض. لذلك ، عندما تكون الشاشات الأفقية والرأسية شاشات أفقية ورأسية ، فإن حجم المحتوى المعروض على الصفحة سيتغير وتغييره تلقائيًا. عندما تكون هواتف Android شاشات أفقية ورأسية ، فلن يتم تغيير DPI ، وعندما لا يتم تكبير صفحة الويب الأفقية والرأسية. لهذا السبب ، يمكن أن يضمن iOS أنه لا يتم إنشاء شريط التمرير على الصفحات الأفقية والرأسية ، ويتم عرض الشاشة الكاملة ، لكن Android لا يمكن أن يضمن ذلك. إذا لم يُسمح بالشاشات الأفقية والرأسية بأن تكون ممتلئة ، والعكس صحيح.
4) بالنسبة لأجهزة iOS ، إذا تم تعريف شاشة العرض وأوسع نطاق الصفحة يتجاوز العرض ، يكون العرض غير صالح وسيظل يتم عرضه في أوسع عرض (لن يكون هناك شريط تمرير). ولكن ستحدث مشكلة غريبة للغاية في هذا الوقت. بعد تبديل الشاشة الأفقية والرأسية لهاتفك عدة مرات ، ستجد أن صفحتك قد تم توسيعها تلقائيًا وظهر شريط التمرير ، ولكن في الواقع ، لا علاقة للعرض الموسع بالعرض الذي تحدده. لمنع حدوث ذلك ، تحتاج إلى ضبط عرض العرض ليكون أكبر من الجزء الأكبر من الصفحة ، أو نفسه.