في الشركة، شاركت في مشروع تطوير مختلط لـ APP وh5 وكنت مسؤولاً عن الجزء h5 من المشروع وسألخص المشكلات التي واجهتها في المشروع على النحو التالي:
أسئلة محددة السؤال 1: مشكلة في شريط التمرير للصفحةوصف المشكلة
تحتوي صفحة الويب على أشرطة تمرير عند التصفح على متصفح جهاز الكمبيوتر، ومع ذلك، عند فتحها على متصفح الهاتف المحمول، لا يوجد شريط تمرير.
حل
قم بتعيين الطبقة الخارجية للصفحة (عندما أكتب صفحة، عادةً ما أكتب حاوية كبيرة في علامة الجسم لتخزين محتوى الصفحة)؛ الارتفاع: 100% مستحيل أيضًا)
مثال
<body> <div style=overflow:scroll/auto;> // محتوى صفحة الويب</div></body>السؤال 2: استخدام حدثي touchstart وtouchend
وصف المشكلة
عند تقديم ملف touch.js واستخدام حدثي touchstart وtouchend لتحقيق تأثيرات تفاعلية، تحدث مشكلة فشل تشغيل الحدث في بعض الهواتف المحمولة [على سبيل المثال: هواتف Honor المحمولة ذات الإصدار المنخفض]
حل
الطريقة الأولى: استخدم RemoveEventListener وaddEventListener معًا
الطريقة الثانية: إضافة e.preventDefault(); لمنع بعض الهواتف المحمولة من القفز بشكل افتراضي
الطريقة الثالثة: يقوم Jquery بتنفيذ ربط الحدث
ملاحظة: الطريقة 1 والطريقة 2 كلاهما JS أصلي يستخدم addEventListener لتنفيذ الاستماع إلى الأحداث، وعندما يستخدم عنصر dom أحداث touchstart وtouchend، يجب استخدامه جنبًا إلى جنب مع ربط الحدث أو الاستماع إلى الحدث، وإلا فسيقوم جزء js بإلقاء خطأ. استثناء.
شفرة
// الطريقة الأولى: document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend',رد اتصال, false);document.getElementById('list5').removeEventListener('touchend',callback, false);// الطريقة الثانية: document.getElementById('list5').addEventListener('touchstart',function(e){ e. منع الافتراضي ()؛}، false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); السؤال 3: مشكلة تعطل الضغط لفترة طويلةاستعادة السيناريو
توجد صفحة قائمة XXX عند الضغط لفترة طويلة على عنصر القائمة في صفحة القائمة (لمس النص)، سيحدث عطل على الهواتف المحمولة ذات الإصدارات الأقل.
حل
جزء js: أضف e.preventDefault(); عند تشغيل الحدث لمنع السلوك الافتراضي
جزء CSS: إضافة كود يمنع نسخ النص
شفرة
// جزء js: e.preventDefault(); // جزء css: -webkit-touch-callout: none; // حل التعطل // تعطيل النسخ -moz-user-select: none;-khtml-user-select: لا شيء؛ تحديد المستخدم: لا شيء؛السؤال 4: مشكلة في 1px على الجهاز المحمول
وصف المشكلة
نظرًا لأن الهواتف المختلفة لها كثافات بكسل مختلفة، فإن 1 بكسل في CSS لا يعادل 1 بكسل على الأجهزة المحمولة. في المشروع، يتم استخدام js وrem لتكييف شاشة الهاتف المحمول، لذلك يحدث موقف بحجم 0.5 بكسل، مما يؤدي إلى عدم تمكن الإصدار الأدنى من الهاتف المحمول من عرض حدود 0.5 بكسل.
حل
استخدم CSS لحل مشكلة 1 بكسل، واكتب مباشرة: border-width:1px; إلى عنصر dom الذي يجب ضبطه على 1px.
شفرة
//جزء HTML: <div class='class1'></div>//css Part: .class1{ border: 1px Solid #ccc;}//css Part/*مشكلة العرض العادي لـ 1px على محطة الهاتف المحمول start*/% border-1px{ العرض: كتلة; الموضع: اليسار المطلق: 0; العرض: 100%;.border-1px{ الموضع: نسبي;::بعد{ @extend %border-1px; Bottom: 0; border-top: 1px Solid #ccc; webkit-min-device-pixel-ratio:1.5)،(min-device-pixel-ratio:1.5){ .border-1px{ &::after{ -webkit-transform:scaleY(0.7);transform:scaleY(0.7) }}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio); :2){ .border-1px{ &::after{ -webkit-transform:scaleY(0.5); }}/*مشكلة العرض العادي لـ 1 بكسل على الجهاز المحمول*/ المشكلة 5: لا يمكن لـ js تحليل قيمة معلمة عنوان url الذي يحتوي على علامة = بشكل صحيحوصف المشكلة
في المشروع، نظرًا لأنه يتم الحصول على قيمة المعلمة لطلب البيانات من عنوان url، وتحتوي قيمة المعلمة على علامة =، لا يمكن تحليل قيمة المعلمة بشكل صحيح (يستخدم ps:js علامة = لفصل معلمات عنوان url )
حل
قم بتحويل عنوان url ثم فك تشفيره [في هذا المشروع، يوفر التطبيق عنوان url الذي تم تحويل ترميزه، وتستخدم الواجهة الأمامية المكون الإضافي geturlparams للحصول على قيمة المعلمة لعنوان url]
شفرة
// فك التشفير = الرقم dom.token = decodeURI($.query.get(token)); // المكون الإضافي // احصل على القيمة دون فك التشفير dom.msgid = $.query.get(msgid);السؤال 6: الاستماع إلى أحداث js الأصلية وربط أحداث jquery غير صالحين في نظام التشغيل iOS
وصف المشكلة
عند استخدام الاستماع إلى الحدث أو ربط الحدث، يكون تشغيل الحدث في نظام التشغيل iOS غير صالح لأن العنصر الأصلي يحدد عنصر النص أو المستند.
حل
لا تستخدم عناصر النص والوثيقة كعناصر أصل
السؤال 7: يتم عرض التاريخ كـ NaN في نظام التشغيل iOSوصف المشكلة
يحتوي تنسيق التاريخ الخاص بالتاريخ على مشكلات توافق في نظام التشغيل iOS. سيتم عرض التاريخ في نظام التشغيل iOS على النحو التالي: NaN
حل
الحل: 2017/12/26 19:36:00 مدعوم في نظام التشغيل iOS، لكن تنسيق 2017-12-26 19:36:00 غير مدعوم. يعرض التنسيق الأخير Nan في نظام التشغيل iOS (يمكن عرضه بشكل طبيعي في Android))
شفرة
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);// تحويل "-" في تنسيق الوقت إلى تنسيق "/"، متوافق مع iOSالسؤال 8: هناك مشكلة في حدث النقر في نظام iOS
وصف المشكلة
عندما يتم تشغيل حدث النقر بنقرة iOS، سيتم تحديد وحدة العنصر الأصلي لتفويض الحدث [أي بسبب فقاعات الحدث ويكون لدى الأصل نمط افتراضي]، وستكون هناك طبقة شفافة، على سبيل المثال
<ul> <li>عنصر القائمة 1</li> <li>عنصر القائمة 2</li> <li>عنصر القائمة 3</li></ul>
التحليل: على سبيل المثال، عندما ينقر مستخدم iOS على عنصر القائمة 1، سيكون لواجهة UL الخاصة بالطبقة الأصلية نمط شفاف.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.