التعليق: استخدام HTML5 لتطوير تطبيقات الهاتف المحمول هو الخيار الأفضل. ومع ذلك ، فإن كل هاتف له قرارات مختلفة وأحجام شاشة. كيف يمكن أن يكون التطبيق أو حجم الصفحة الذي طورناه مناسبًا للاستخدام في مختلف الهواتف الراقية؟
مع شعبية الهواتف المحمولة المتطورة (Andriod و iPhone و iPod و WinPhone وما إلى ذلك) ، فإن تطوير تطبيق الإنترنت المحمول يحظى أيضًا بمزيد من الاهتمام من الأشخاص. يعد استخدام HTML5 لتطوير تطبيقات الهاتف المحمول هو الخيار الأفضل. ومع ذلك ، فإن كل هاتف له قرارات مختلفة وأحجام شاشة. كيف يمكن أن يكون التطبيق أو حجم الصفحة الذي طورناه مناسبًا للاستخدام في مختلف الهواتف الراقية؟ يمكن أن يساعدك تعلم استخدام HTML5 Viewport في القيام بذلك ...
عرض بناء الجملة:
<!-وثيقة HTML->
<meta
المحتوى = "
الارتفاع = [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->
<meta content = "Target chansledpi = device-DPI" />
<meta content = "target chancydpi = high-DPI" />
<meta content = "Target assaledpi = medium-DPI" />
<meta content = "Target chansledpi = low-DPI" />
<meta content = "Target chansledpi = 200" />
لمنع متصفح Android و WebView من تحجيم صفحاتك استنادًا إلى كثافة البكسل للشاشات المختلفة ، يمكنك تعيين الكثافة الهدف من منفذ العرض إلى Device-DPI. عند القيام بذلك ، لن تتوسع الصفحة. بدلاً من ذلك ، يتم عرض الصفحة بناءً على كثافة البكسل للشاشة الحالية. في هذه الحالة ، تحتاج أيضًا إلى تحديد عرض منفذ العرض لمطابقة عرض الجهاز حتى تتمكن صفحتك من التكيف مع الشاشة.
النطاق الأولي
التحجيم الأولي. وهذا هو ، مستوى التكبير الأولي للصفحة. هذه قيمة نقطة عائمة ، مضاعف حجم الصفحة. على سبيل المثال ، إذا قمت بتعيين التحجيم الأولي على 1.0 ، فسيتم عرض صفحة الويب بدقة 1: 1 لكثافة الهدف. إذا قمت بتعيينه على 2.0 ، فسيتم توسيع هذه الصفحة إلى 2x.
الحد الأقصى على نطاق
الحد الأقصى للتكبير. هذا هو الحد الأقصى المسموح به درجة التحجيم. هذه أيضًا قيمة نقطة عائمة تشير إلى الحد الأقصى لمضاعف حجم الصفحة مقارنة بحجم الشاشة. على سبيل المثال ، إذا قمت بتعيين هذه القيمة على 2.0 ، يمكن توسيع هذه الصفحة حتى مرتين مقارنة بالحجم المستهدف.
قابلة للتطبيق
يقوم المستخدم بضبط التكبير. أي ما إذا كان بإمكان المستخدم تغيير مستوى تكبير الصفحة. إذا تم تعيينه على نعم ، فسيسمح المستخدم بتغييره ، وإلا فهو لا. القيمة الافتراضية هي نعم. إذا قمت بتعيينه على لا ، فسيتم تجاهل كلا من الحد الأدنى والحد الأقصى على نطاق الحد الأقصى لأن التحجيم غير ممكن ببساطة.
يجب أن تكون جميع قيم التحجيم ضمن نطاق 0.01-10.
مثال:
(اضبط عرض الشاشة على عرض الجهاز ، وحظر المستخدمين من ضبط التكبير يدويًا)
<meta name = viewport content = width = width device ، ackalable = no />
(اضبط كثافة الشاشة للتكبير تلقائيًا في التردد العالي ، والتردد المتوسط ، والتردد المنخفض ، وحظر المستخدمين من ضبط التكبير يدويًا)
<name meta = viewport content = width = width الجهاز ، الكثافة الهدف = dpi عالية ، scale الأولي = 1.0 ، الحد الأدنى = 1.0 ، الحد الأقصى scale = 1.0 ، قابلة للنساء المستخدم = no/>