المبادئ الأساسية وأساليب الاستخدام التفصيلية لبرنامج العرض

عادةً ما تقوم متصفحات الهاتف المحمول بتقديم الصفحات في نافذة افتراضية أوسع من الشاشة. هذه النافذة الافتراضية هي عرض. والغرض من ذلك هو عرض صفحات الويب التي لا يتم تكييفها مع محطة الهاتف المحمول بشكل طبيعي ، بحيث يمكن عرضها بالكامل للمستخدمين. في بعض الأحيان ، عندما نستخدم الأجهزة المحمولة للوصول إلى صفحة ويب سطح المكتب ، سنرى شريط تمرير أفقي ، وعرض منطقة العرض هنا هو عرض منفذ العرض.

بانتظام ، إذا كان يمكن قياس الصفحة ، استخدم الكود التالي

<meta name = viewport content = width = width device ، sciale = 1 />

إذا كنت لا ترغب في التكبير ، فاستخدم الكود التالي

<name meta = viewport content = width = width device ، sciale scale = 1.0 ، minimate scale = 1.0 ، maximum scale = 1.0 ، ster-scalable = no>

عند تطوير صفحات الويب على سطح المكتب ، يكون 1px في CSS 1 بكسل على الجهاز ؛ ومع ذلك ، 1 بكسل في CSS هو مجرد قيمة مجردة ، والتي لا تمثل وحدات البكسل الفعلية ؛ أثناء وجوده في الأجهزة المحمولة ، تختلف كثافة البكسل للأجهزة المختلفة ، وقد لا تكون 1 بكسل في CSS مساوية لقيمة بكسل للجهاز الحقيقي. سيؤدي تحجيم المستخدم أيضًا إلى تغيير عدد وحدات البكسلات التي تمثلها 1 بكسل في CSS. هذه النسبة هي devicepixelratio

وحدات البكسل المادية/وحدات البكسل المستقلة = DevicePixelRatio

يمكننا التكبير في المتصفح وطباعة نافذة. يمكن فهم وحدات البكسل المستقلة في PX في CSS.

شفرة:

<name meta = viewport content = width = width device ، sciale = 1 ، maximum scale = 1>

فيما يلي العديد من خصائص Viewport. يمكن استخدام هذه الخصائص بطريقة مختلطة. يجب فصل خصائص متعددة بواسطة الفواصل في نفس الوقت. نحن هنا نوسع مفهومًا يسمى Ideal Viewport ، والذي يشير إلى منفذ العرض في ظل ظروف مثالية. يمكنه عرض جميع محتوى صفحة الويب بشكل طبيعي دون تحجيم المستخدم وقضبان التمرير الأفقي ، ويمكن أن ترى كل النصوص بوضوح. بغض النظر عن حجم هذا النص الصغير في CSS ، يمكن رؤيته بوضوح عند عرضه.

1.-Width و ORIMPLICE

عند ضبط العرض والسياس الأولي ، سيقوم المتصفح تلقائيًا بتحديد أكبر قيمة للتكيف. أصل:

<meta name = viewport content = width = 400 ، scale scale = 1>

سيختار المتصفح قيمة كبيرة للتكيف. إذا كان عرض منفذ العرض المثالي للنافذة الحالية هو 300 والقيمة الأولية هي 1 ، يتم الحصول على قيمة العرض 400 ؛ إذا كان إمكانية العرض المثالية للنافذة الحالية 480 ، فسيتم تحديد 480.

في الواقع ، فإن العرض = عرض الجهاز والسكون الأولي = 1 يمثل كلاهما تطبيق منفذ العرض المثالي ، ولكن على الأجهزة المحمولة مثل iPad و iPhone و IE ، لا يتم تمييز الشاشات الأفقية والعمودية ، ويتم أخذ عرض الشاشة العمودية افتراضيًا. أفضل طريقة لكتابة التوافق هي

<meta name = viewport content = width = width device ، sciale = 1>

2. تغيير السمات ديناميكيا

أ. document.write ()

document.write ('<meta name = viewport content = width = width device ، scale scale = 1>')

B.SetAttribute

var mvp = document.getElementById ('testViewPort') ؛

mvp.setattribute ('content' ، 'width = 480') ؛

عادةً ما تقوم متصفحات الهاتف المحمول بتقديم الصفحات في نافذة افتراضية أوسع من الشاشة. هذه النافذة الافتراضية هي عرض. والغرض من ذلك هو عرض صفحات الويب التي لا يتم تكييفها مع محطة الهاتف المحمول بشكل طبيعي ، بحيث يمكن عرضها بالكامل للمستخدمين. في بعض الأحيان ، عندما نستخدم الأجهزة المحمولة للوصول إلى صفحة ويب سطح المكتب ، سنرى شريط تمرير أفقي ، وعرض منطقة العرض هنا هو عرض منفذ العرض.

عند تطوير صفحات الويب على سطح المكتب ، يكون 1px في CSS 1 بكسل على الجهاز ؛ ومع ذلك ، 1 بكسل في CSS هو مجرد قيمة مجردة ، والتي لا تمثل وحدات البكسل الفعلية ؛ أثناء وجوده في الأجهزة المحمولة ، تختلف كثافة البكسل للأجهزة المختلفة ، وقد لا تكون 1 بكسل في CSS مساوية لقيمة بكسل للجهاز الحقيقي. سيؤدي تحجيم المستخدم أيضًا إلى تغيير عدد وحدات البكسلات التي تمثلها 1 بكسل في CSS. هذه النسبة هي devicepixelratio

وحدات البكسل المادية/وحدات البكسل المستقلة = DevicePixelRatio

يمكننا التكبير في المتصفح وطباعة نافذة. يمكن فهم وحدات البكسل المستقلة في PX في CSS.

يحتوي الموقع المحسّن المحمول النموذجي على محتوى مشابه لما يلي:

<name meta = viewport content = width = width device ، sciale = 1 ، maximum scale = 1>

فيما يلي العديد من خصائص Viewport. يمكن استخدام هذه الخصائص بطريقة مختلطة. يجب فصل خصائص متعددة بواسطة الفواصل في نفس الوقت. نحن هنا نوسع مفهومًا يسمى Ideal Viewport ، والذي يشير إلى منفذ العرض في ظل ظروف مثالية. يمكنه عرض جميع محتوى صفحة الويب بشكل طبيعي دون تحجيم المستخدم وقضبان التمرير الأفقي ، ويمكن أن ترى كل النصوص بوضوح. بغض النظر عن حجم هذا النص الصغير في CSS ، يمكن رؤيته بوضوح عند عرضه.

1.-Width و ORIMPLICE

عند ضبط العرض والسياس الأولي ، سيقوم المتصفح تلقائيًا بتحديد أكبر قيمة للتكيف. أصل:

<meta name = viewport content = width = 400 ، scale scale = 1>

سيختار المتصفح قيمة كبيرة للتكيف. إذا كان عرض منفذ العرض المثالي للنافذة الحالية هو 300 والقيمة الأولية هي 1 ، يتم الحصول على قيمة العرض 400 ؛ إذا كان إمكانية العرض المثالية للنافذة الحالية 480 ، فسيتم تحديد 480.

في الواقع ، فإن العرض = عرض الجهاز والسكون الأولي = 1 يمثل كلاهما تطبيق منفذ العرض المثالي ، ولكن على الأجهزة المحمولة مثل iPad و iPhone و IE ، لا يتم تمييز الشاشات الأفقية والعمودية ، ويتم أخذ عرض الشاشة العمودية افتراضيًا. أفضل طريقة لكتابة التوافق هي

<meta name = viewport content = width = width device ، sciale = 1>

2. تغيير السمات ديناميكيا

أ. document.write ()

document.write ('<meta name = viewport content = width = width device ، scale scale = 1>')

B.SetAttribute

var mvp = document.getElementById ('testViewPort') ؛

mvp.setattribute ('content' ، 'width = 480') ؛

حسنًا ، تم تقديم هذه المقالة لك. يمكنك الاختيار وفقًا لاحتياجات الاختبار الخاصة بك. بشكل عام ، يمكن استخدام أجهزة الكمبيوتر والهواتف المحمولة دون القدرة على التكيف ولا تدعم التحجيم. إذا قفزت إلى الهاتف المحمول ، فيمكنك التوسع دون أي تأثير.