تعليق: مع شعبية الهواتف المحمولة المتطورة (Andriod و iPhone و iPod و WinPhone وما إلى ذلك) ، يحظى تطوير تطبيقات الإنترنت بالهاتف المحمول أيضًا بمزيد من الاهتمام من الأشخاص. يعد استخدام HTML5 لتطوير تطبيقات الهاتف المحمول هو الخيار الأفضل. ومع ذلك ، فإن كل هاتف له قرارات مختلفة وأحجام شاشة. كيف يمكن أن يكون التطبيق أو حجم الصفحة الذي طورناه مناسبًا للاستخدام في مختلف الهواتف الراقية؟ تعلم HTML5 Viewport
عرض بناء الجملة:
<!- وثيقة HTML->
<name meta = viewport
المحتوى =
الارتفاع = [pixel_value | ارتفاع الجهاز] ،
العرض = [pixel_value | عرض الجهاز] ،
النطاق الأولي = float_value ،
الحد الأدنى على نطاق = float_value ،
الحد الأقصى = float_value ،
قابلة للمعارض المستخدم = [نعم | لا] ،
الكثافة الهدف = [dpi_value | جهاز DPI | عالية الدقة | متوسطة DPI | Low-DPI]
/>
شرح المعلمة:
عرض
—— يوضح حجم منفذ العرض ، والذي يمكن تحديده كقيمة أو قيمة خاصة ، مثل عرض الجهاز ، وهو عرض الجهاز (وحدات البكسلات من CSS عند تحجيمها إلى 100 ٪.
ارتفاع
—— تتوافق مع العرض ، وتحديد الارتفاع.
الكثافة الهدف
- - يتم تحديد كثافة بكسل شاشة بدقة الشاشة وعادة ما يتم تعريفها على أنها عدد النقاط في البوصة (DPI). يدعم Android ثلاثة كثافة بكسل الشاشة: كثافة منخفضة بكسل ، وكثافة البكسل المتوسطة ، وكثافة بكسل عالية. تحتوي شاشة كثافة بكسل منخفضة البكسل على عدد أقل من البكسلات لكل بوصة ، بينما تحتوي شاشة كثافة بكسل عالية على المزيد من البكسلات لكل بوصة. يتميز Browser و WebView Android بكثافة متوسطة البكسل بشكل افتراضي.
فيما يلي نطاق قيمة سمة الكثافة الهدف
Device-DPI: استخدم DPI الأصلي للجهاز كـ DP الهدف. التكبير الافتراضي لا يحدث.
High-DPI: استخدم HDPI كـ DPI الهدف. يتم تقليل أجهزة كثافة البكسل المتوسطة والمنخفضة وفقًا لذلك.
متوسطة DPI: استخدم MDPI كهدف DPI. يتم توسيع جهاز كثافة بكسل عالية وفقًا لذلك ، ويتم تقليل جهاز كثافة البكسل وفقًا لذلك. هذه هي الكثافة الهدف الافتراضية.
Low-DPI: استخدم MDPI كـ DPI الهدف. يتم تضخيم أجهزة كثافة البكسل المتوسطة والعالية وفقًا لذلك.
<Vale>: حدد قيمة DPI محددة كـ DPI الهدف. يجب أن يتراوح نطاق هذه القيمة بين 70-400.
<!- وثيقة HTML->
<name meta = viewport content = target asshensedpi = device-DPI />
<name meta = viewport content = target dendentdpi = High-DPI />
<name meta = viewport content = target asshensedpi = medium-DPI />
<meta name = viewport content = target asshensedpi = low-DPI />
<name meta = viewport content = target asshensedpi = 200 ″ />
لمنع متصفح Android و WebView من تحجيم صفحاتك استنادًا إلى كثافة البكسل للشاشات المختلفة ، يمكنك تعيين الكثافة الهدف من منفذ العرض إلى Device-DPI. عند القيام بذلك ، لن تتوسع الصفحة. بدلاً من ذلك ، يتم عرض الصفحة بناءً على كثافة البكسل للشاشة الحالية. في هذه الحالة ، تحتاج أيضًا إلى تحديد عرض منفذ العرض لمطابقة عرض الجهاز حتى تتمكن صفحتك من التكيف مع الشاشة.
النطاق الأولي
— - التحجيم. وهذا هو ، مستوى التكبير الأولي للصفحة. هذه قيمة نقطة عائمة ، مضاعف حجم الصفحة. على سبيل المثال ، إذا قمت بتعيين التحجيم الأولي على 1.0 ، فسيتم عرض صفحة الويب بدقة 1: 1 لكثافة الهدف. إذا قمت بتعيينه على 2.0 ، فسيتم توسيع هذه الصفحة إلى 2x.
الحد الأقصى على نطاق
—— Maximum Zoom. هذا هو الحد الأقصى المسموح به درجة التحجيم. هذه أيضًا قيمة نقطة عائمة تشير إلى الحد الأقصى لمضاعف حجم الصفحة مقارنة بحجم الشاشة. على سبيل المثال ، إذا قمت بتعيين هذه القيمة على 2.0 ، يمكن توسيع هذه الصفحة حتى مرتين مقارنة بالحجم المستهدف.
قابلة للتطبيق
—— المستخدم يعدل التكبير. أي ما إذا كان بإمكان المستخدم تغيير مستوى تكبير الصفحة. إذا تم تعيينه على نعم ، فسيسمح المستخدم بتغييره ، وإلا فهو لا. القيمة الافتراضية هي نعم. إذا قمت بتعيينه على لا ، فسيتم تجاهل كلا من الحد الأدنى والحد الأقصى على نطاق الحد الأقصى لأن التحجيم غير ممكن ببساطة.
يجب أن تكون جميع قيم التحجيم ضمن نطاق 0.01-10.
مثال: 1. اضبط عرض الشاشة على عرض الجهاز ، وحظر المستخدمين من ضبط التكبير يدويًا
<meta name = viewport content = width = width device ، ackalable = no />
2. اضبط كثافة الشاشة على التحجيم التلقائي للتردد العالي والتردد المتوسط وتردد منخفض ، وحظر المستخدمين على ضبط التحجيم يدويًا
<name meta = viewport content = width = width الجهاز ، الكثافة الهدف = dpi عالية ، scale الأولي = 1.0 ، الحد الأدنى = 1.0 ، الحد الأقصى scale = 1.0 ، قابلة للنساء المستخدم = no/>