Mobile Development
1.0.0
يشير إلى الطول المائل للشاشة ، بالبوصة. تشمل الأحجام الشائعة: 3.5 بوصة ، 4.0 بوصة ، 5.0 بوصة ، 5.5 بوصة ، 6.0 بوصة ، إلخ.
ملاحظة: 1 بوصة (بوصة) = 2.54 سم (سم)
إنه يشير إلى إجمالي عدد نقاط البيكسل المادية على الشاشة في الاتجاهات الأفقية والرأسية ، والتي يمثلها عمومًا بواسطة n * m. على سبيل المثال: دقة الشاشة لـ iPhone6 هي: 750 * 1334
| نموذج | قرار (مجموع البكسلات المادية) |
|---|---|
| iPhone 3G/3GS | 320 * 480 |
| iPhone 4 / 4S | 640 * 960 |
| iPhone 5/5S | 640 * 1136 |
| iPhone 6/7/8 | 750 * 1334 |
| iPhone 6p / 7p / 8p | 1242 * 2208 |
| iPhone X. | 1125 * 2436 |
| هوي P30 | 1080 * 2340 |
| Hawei Mate40 | 2772 * 1344 |
| Xiaomi 10 | 2340 * 1080 |
| Xiaomi 11 | 3200 * 1440 |
يُعرف أيضًا باسم: كثافة بكسل الشاشة ، ويشير إلى عدد نقاط البيكسل المادية الموجودة في كل بوصة على الشاشة. الوحدة هي PPI (وحدات البكسل لكل بوصة). في الواقع ، هناك وحدة أخرى DPI (نقاط لكل بوصة). طرق حساب القيمتين هي نفسها ، ولكن سيناريوهات الاستخدام مختلفة. يستخدم PPI بشكل أساسي لقياس الشاشات ، ويستخدم DPI بشكل رئيسي لقياس الطابعات ، أجهزة العرض ، إلخ.
وحدات البكسل المادية ، والمعروفة أيضًا باسم وحدات البكسل ، هي وحدة طول (PX). البكسل المادي هو نقطة تصوير مادية على الشاشة ، وهو مكون مادي صغير جدًا (والذي يمكن فهمه ببساطة كمصباح كهربائي صغير للغاية) ، وهو الحد الأدنى من الحبيبات التي يمكن أن تعرضها الشاشة. يعد العدد الفعلي لنقاط البكسل (دقة) الشاشة معلمة مهمة لشاشة الهاتف المحمول ويتم تحديدها بواسطة الشركة المصنعة للشاشة ولا يمكن تعديلها بعد الإنتاج . على سبيل المثال ، البكسلات المادية التي يمتلكها iPhone6 في الاتجاه الأفقي هي 750 ، والبكسلات المادية التي لديها في الاتجاه العمودي هي 1334 ، ويمثلها 750*1334.
يُعرف CSS Pixel أيضًا باسم: Pixel المنطقي. Pixel CSS هي وحدة مجردة من الطول ، والوحدة هي أيضا px. يتم إنشاؤه لمطوري الويب لقياس حجم المحتوى بدقة على صفحة ويب. نستخدم بكسلات CSS في كتابة CSS JS أقل.
يشار إلى وحدات البكسل المستقلة عن الجهاز باسم DIP أو DP (بكسل مستقل عن الجهاز) ، والمعروفة أيضًا باسم: بكسلات مستقلة عن كثافة الشاشة.
مقدمة: في العصر الذي لم يظهر فيه [شاشة HD] ، يتوافق بكسل 1 CSS مع 1 بكسل فعلي ، ولكن منذ ظهور [شاشة HD] ، لم يعد الاثنان علاقة من 1 إلى 1. في عام 2010 ، أطلقت شركة Apple معيارًا جديدًا للعروض: ضغط المزيد من نقاط البكسل الفعلي في الشاشة بينما يظل حجم الشاشة دون تغيير ، بحيث تكون الدقة أعلى وستكون تأثير العرض أفضل وأكثر حساسية. تستدعي Apple هذه الشاشة: شاشة Retina (المعروفة أيضًا باسم شاشة Retina) ، وفي نفس الوقت أطلقت المنتج الرقمي لصنع الحقبة المجهز بهذه الشاشة - iPhone 4.
كتب المبرمج: العرض = 2px ، الارتفاع = 2px مربع. إذا كان بكسل CSS يتوافق مباشرة مع بكسل فعلي واحد ، نظرًا لأن حجم شاشة iPhone3G/S و iPhone4 هو نفسه مثل iPhone4 ، فإن شاشة iPhone4 يمكن أن تستوعب المزيد من وحدات البكسل الفعلية ، وبالتالي فإن البكسلات الفعلية من iPhone4 أصغر بكثير من جهاز iPhone3G/s. من الناحية النظرية ، سيكون هذا المربع أصغر بكثير على شاشة iPhone4 مقارنة بشاشة iPhone3G/S. والحقيقة هي أن iPhone3G/S هو نفس حجم iPhone4! ! ! ، لكن iPhone 4 أكثر حساسية وواضحة. كيف تفعل ذلك؟ هذا يعتمد على وحدات البكسل المستقلة للجهاز. 
إن ظهور وحدات البكسل المستقلة للجهاز يجعل العناصر ذات أحجام عادية حتى على [شاشة HD]. S يجعل الرمز لا يتأثر بالجهاز. يتم تعيينها من قبل الشركة المصنعة للجهاز وفقًا لخصائص الشاشة ولا يمكن تغييرها.
نسبة البيكسل (DPR ، نسبة بكسل الجهاز): نسبة [Pisterial Pixel] و [Pixel المستقل Device] في اتجاه واحد. هذا هو: DPR = وحدات البكسل المادية/البكسلات المستقلة للجهاز
| نموذج | قرار (مجموع البكسلات المادية) | وحدات البكسل المستقلة للجهاز (DIP أو DP) | نسبة البكسل (DPR) |
|---|---|---|---|
| iPhone 3G/3GS | 320 * 480 | 320 * 480 | 1 |
| iPhone 4 / 4S | 640 * 960 | 320 * 480 | 2 |
| iPhone 5/5S | 640 * 1136 | 320 * 568 | 2 |
| iPhone 6/7/8 | 750 * 1334 | 375 * 667 | 2 |
| iPhone 6p / 7p / 8p | 1242 * 2208 | 414 * 736 | 3 |
| iPhone X. | 1125 * 2436 | 375 * 812 | 3 |
https://uiiiii.com/screen/index.htm
مخططات نقطية وخطوط المتجهات
Pixel صورة صغيرة هي أيضًا وحدة طول. يمكن فهم بكسل صورة صغيرة على أنها "شبكة صغيرة" في صورة نقطية ، وهي أصغر وحدة في صورة نقطية.
في الوقت الحاضر ، يجب عرض الشعار فقط على عالي الوضوح ، أو يمكن توفير شعار تنسيق SVG لحل المشكلة. خلاف ذلك ، يتم استخدام استعلام الوسائط:
@media screen and ( -webkit-min-device-pixel-ratio : 2 ) {
. logo {
content : url (.. / imgs / logo@ 2 x.jpg)
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ) {
. logo {
content : url (.. / imgs / logo@ 3 x.jpg)
}
}على جانب الكمبيوتر الشخصي ، يكون العرض الافتراضي لعملية العرض هو نفس عرض نافذة المتصفح. في وثيقة CSS القياسية ، يسمى إطار العرض أيضًا: يحتوي في البداية على كتل ، وهو السبب الجذري لجميع حسابات نسبة النسبة المئوية CSS. على جانب الكمبيوتر ، يمكن الحصول على العرض بالطرق التالية:
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; على الأجهزة المحمولة ، يواجه مصنعو المستعرضات مشكلة كبيرة نسبيًا: كيف يقدمون عشرات الآلاف ، حتى مئات الملايين من صفحات الويب على أجهزة الكمبيوتر المحمولة بطريقة كاملة بدون أشرطة التمرير الأفقية؟ ثم نحتاج إلى تقديم ثلاثة مفاهيم للمحطات المحمولة: 1. تخطيط Viewport ، 2. Visual Viewport ، 3.
تستخدم لحل مشكلة عرض الصفحة المبكرة على الهواتف المحمولة. في الأيام الأولى ، فعلنا ذلك: عرض صفحات الويب الخاصة بالكمبيوتر الشخصي بشكل عام: 960 بكسل نطاق 1024px ، حتى لو كان يتجاوز هذا النطاق ، 960 بكسل لا تزال منطقة 1024px هي موقع الجسم الرئيسي.
صممت الشركات المصنعة للمتصفح حاوية للأجهزة المحمولة. أولاً ، استخدم هذه الحاوية لعقد صفحة الويب على الكمبيوتر. عرض هذه الحاوية عمومًا 980 بكسل . قد تختلف الأجهزة المختلفة ، لكن الفرق ليس كبيرًا. بعد ذلك ، يتم ضغط الحاوية بالتناسب بالتساوي مع نفس عرض الهاتف المحمول ، بحيث لا يوجد شريط تمرير ويمكن تقديم الصفحة بالكامل. ومع ذلك ، لا تزال هناك مشاكل في القيام بذلك: محتوى صفحة الويب مضغوط صغير جدًا ، مما يؤثر بشكل خطير على تجربة المستخدم.
كيفية الحصول على منصات عرض التخطيط على محطة الهاتف المحمول: document.documentElement.clientWidth (عادة 980 بكسل ، iPad Pro هو 1024px)
ملاحظة: بعد ضغط منفذ عرض التصميم ، لم يعد العرض الأفقي 375 بكسل ، ولكن 980 بكسل ، لأن منفذ عرض التصميم مضغوط ، ولم يتم اعتراضه.
إطار العرض المرئي هو المنطقة المرئية للمستخدم. يكون عرضه المطلق دائمًا واسعًا مثل شاشة الجهاز ، لكن قيمة بكسلات CSS الموجودة في هذا العرض تختلف. على سبيل المثال: بشكل عام ، ستضع الهواتف المحمولة 980 CSS في منفذ العرض المرئي (حجم منفذ العرض المرئي = حجم منفذ العرض) ، بينما سيضع iPad Pro 1024 بكسل في منفذ العرض المرئي.
طريقة للحصول على عرض مرئي على محطة الهاتف المحمول: window.innerWidth ، ولكن لا يمكن الحصول عليها بشكل صحيح في Android 2 و Opera Mini و UC8. (بشكل عام ، لا يتم عرض منفذ العرض المرئي من خلال الكود)
إذا أخذت iPhone 6 كمثال ، فصف الشاشة:
يُطلق على منفذ عرض التصميم الذي يساوي عرض الشاشة (DP/DIP) ممنفًا مثاليًا للعرض ، لذلك يمكن القول أيضًا أن منفذ العرض المثالي هو المعيار: عرض منفذ عرض التصميم والشاشة (DP/DIP) يتم تحقيقها بواسطة علامات التعريف.
طرق محددة لإعداد منفذ عرض مثالي:
< meta name =" viewport " content =" width=device-width " >【تلخيص】:
1. الوصف شاشة: وحدات البكسل الفعلية: 750p × ، وحدات البكسل المستقلة للجهاز: 375 بكسل ، بكسلات CSS: 980 بكسل. 2. المزايا: يكون التأثير المقدم للعناصر على الأجهزة المختلفة هو نفسه تقريبًا ، لأنه يتم تحجيمه بواسطة حاويات تخطيط ، مثل 200 صندوق عريض: 200/980 3. العيوب: العناصر صغيرة جدًا ، ونص الصفحة غير واضح ، وتجربة المستخدم ليست جيدة.
1. الوصف شاشة: البكسلات الفعلية: 750 بكسل ، وحدات البكسل المستقلة: 375 بكسل ، بكسلات CSS: 375 بكسل. 2. المزايا: يتم عرض الصفحة بوضوح ، لم يعد المحتوى صغيرًا كما كان من الصعب مراقبته ، وتجربة المستخدم أفضل. 3. العيوب: نفس العنصر له تأثيرات عرض مختلفة على شاشات مختلفة (الأجهزة). على سبيل المثال ، المربع على مستوى 375: 375/375 و 375/414 (غير متساوٍ في العرض المكافئ). 4. كيفية حلها: جعل التكيف.
عند التكبير في:
تقليل الحجم:
عملية الخوارزمية: عند التوسيع ، يعترض المتصفح نسبة معينة من المساحة الداخلية ، ثم يملأ الصورة المتبقية على الفور بنسب متساوية إلى منفذ العرض بأكمله ، وسيتم تخفيض العناصر التي لا يمكن وضعها تلقائيًا.
مراقبة البرنامج النصي:
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} عند التكبير في:
ملاحظة: لن يؤثر التحجيم المحمول على تخطيط الصفحة ، لأن حجم منفذ عرض التصميم لا يتغير أثناء التحجيم.
تم تقديم علامة Meta-Viewport من قبل Apple في عام 2007 للتحكم في منفذ عرض تخطيط الهاتف المحمول ، في محاولة لتغيير قواعد الصناعة الخاصة بمنفذ عرض 980. الخيارات المتعلقة بالمنفذ:
يمكن أن تكون قيمة العرض عرضًا للجهاز أو قيمة محددة ، لكن بعض هواتف Android لا تدعم قيمة محددة ، ويدعم سلسلة iOS الكاملة
width=device-width, initial-scale=1.0 معًا.الحد الأقصى المقياس المسموح به لتوسيع المستخدم [Safari لا يدعم] الحد الأقصى = عرض الشاشة (DIP Pixels المستقلة ، DIP) / عرض المنافذ البصرية
الحد الأقصى للمقياس الذي يسمح للمستخدم بتوسيع نطاق الحد الأدنى = عرض الشاشة (DIP Pixels المستقلة ، DIP) / عرض المنفذ المرئي
ما إذا كنت للسماح للمستخدمين بتكبير الصفحة من خلال أصابعهم [لا تدعم Safari]
يمكن أن يحل الإعداد لتغطية مشكلة المساحة البيضاء في [شاشة الشق]
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover " >1. لماذا تحتاج إلى التكيف؟ نظرًا لأحجام الشاشة المختلفة للأجهزة المحمولة ، سيكون هناك: نفس العنصر سيظهر تأثيرات مختلفة على هاتفين مختلفين (نسب مختلفة). إذا تم عرض نفس العنصر على أجهزة مختلفة ، فيجب تكييفه. بغض النظر عن طريقة التكيف التي يتم استخدامها ، فإن المبدأ المركزي هو دائمًا: مقارنة متساوية!
هناك ثلاث طرق للتكيف السائدة:
EM و REM كلاهما وحدات الطول في CSS. وكلاهما وحدات ذات طول نسبي ، لكن الاثنين مختلفان بعض الشيء
بموجب منفذ العرض المثالي ، يتم استخدام مشروع التصميم (DIP هو 375 بكسل) كمعيار وخط الجذر هو 100 بكسل لتتناسب مع تراجع الأجهزة الأخرى.
في منفذ العرض المثالي ، قم بتعيين خط الجذر على الانخفاض/10 ، أي قارن عن DIP بـ 10 REM ، مع الأخذ في الاعتبار عدد العناصر الداخلية التي يتم شغلها
1 VW = 1 ٪ من عرض المنفذ عرض 2 VH = 1 ٪ من ارتفاع عرض المنظر
عرض التوافق: caniuse.com
1 بكسل في شاشة HD يتوافق مع المزيد من وحدات البكسل المادية (المصابيح الكهربائية الصغيرة) ، وبالتالي فإن الحدود 1 بكسل تبدو أكثر سمكا. الحل كما يلي:
@media screen and ( -webkit-min-device-pixel-ratio : 2 ){
# demo {
border : solid 0.5 px black;
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ){
# demo {
border : solid 0.333 px black;
}
}قائمة الأحداث المحمول
ظهرت الأحداث أعلاه لأول مرة في iOS Safari لنقل بعض المعلومات الخاصة للمطورين
يلاحظ:
بعد الانتهاء من حدث Touch ، سيتم تشغيل حدث النقر للعنصر افتراضيًا. إذا لم يتم تعيين منفذ العرض المثالي ، فإن الفاصل الزمني للحدث هو حوالي 300 مللي ثانية. إذا تم تعيين منفذ العرض المثالي ، فإن الفاصل الزمني حوالي 30 مللي ثانية (اعتمادًا على خصائص الجهاز المحددة).
إذا تسبب حدث Touch في إخفاء العنصر ، فسيتم إجراء عملية النقر على العنصر الذي يقف وراءه ، مما يؤدي إلى حدوث حدث نقرة أو قفزة للصفحة من العنصر الجديد. وتسمى هذه الظاهرة اختراق النقر .
حظر السلوك الافتراضي
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) اجعل العناصر وراء الكواليس لا تحتوي على خصائص النقر وتعديلها إلى علامات DIV العادية:
< div id =" baidu " >点我去百度</ div >استخدم حدث Touchend وانقر للانتقال إلى صفحة الويب الجديدة
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) استخدم سمة أحداث المؤشر في CSS لتفقد حدث النقر مؤقتًا واستعادته بعد 300 ميلي ثانية:
# baidu {
display : block;
width : 100 % ;
height : 300 px ;
background-color : skyblue;
pointer-events : none;
} btn . addEventListener ( 'touchend' , ( ) => {
shade . style . display = 'none'
setTimeout ( ( ) => {
baidu . style . pointerEvents = 'auto' // 恢复正常
} , 300 ) ;
} ) دع العناصر الخفية تتأخر بحوالي 300 ميلي ثانية قبل إخفاءها
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
