في الماضي، عندما كنت أعمل على جانب الكمبيوتر الشخصي، كنت أواجه أيضًا مشكلات في التوافق، ولكن لأكون صادقًا، كل ما كان يدور في ذهني هو مشكلات IE، ولم يكن هناك ما يجب أن أهتم به بشكل خاص ربما كان ذلك لأنني لم يكن جيدًا في التلخيص، والآن أعمل على الجانب المتحرك (في الأصل اعتقدت أن الجانب المتحرك سهل للغاية، لذلك لم آخذه على محمل الجد)، لذلك كنت مخطئًا، لقد دفعت ثمن ازدرائي وغرورتي!
لقد واجهت مؤخرًا بعض أخطاء التوافق ووجدت معلومات على الإنترنت.
دعونا نتحدث عن إطار العرض أولا
القالب أولا
<meta charset=utf-8><!--الغرض الرئيسي هو فرض بقاء عرض المستند وعرض الجهاز 1:1، بحد أقصى للعرض 1.0، ومنع تغيير حجم الشاشة. --><محتوى التعريف=العرض=عرض الجهاز، المقياس الأولي=1.0، الحد الأقصى للمقياس=1.0، قابل للتحجيم حسب المستخدم=لا يوجد اسم=منفذ العرض><!--هذه أيضًا علامة خاصة بـ iPhone، مما يسمح بملء الشاشة التصفح. --><meta content=yes name=apple-mobile-web-app-capable><!--الملصق الخاص لجهاز iPhone، ونمط شريط الحالة في الجزء العلوي من iPhone. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--تعطيل التعرف التلقائي على الأرقام كأرقام هواتف، وهذا أكثر فائدة، لأنه سيتم عرض سلسلة من الأرقام مثل اللون الأزرق، فإن إضافات النمط إلى الألوان الأخرى غير فعالة أيضًا. --><محتوى التعريف=هاتف=لا يوجد اسم=كشف التنسيق><!--تعطيل التعرف على البريد الإلكتروني--><محتوى التعريف=البريد الإلكتروني=لا يوجد اسم=كشف التنسيق>
من الأفضل إضافة أعلى اليسار أو 0 0 عند كتابة صور الخلفية، وإلا فمن السهل القفز عند كتابة تأثيرات الحركة.
يحظر النسخ والنص المحدد
.el { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none;يوجد خطأ في الموضع الثابت لهواتف Apple المحمولة. تحقق مما إذا كان overflow-x:hidden قد تم تعيينه في html وbody؛
قم بتعيين أنماط خاصة للهواتف المحمولة بأحجام شاشات مختلفة
شاشة @media فقط و(الحد الأدنى لعرض الجهاز : 320 بكسل) و(الحد الأقصى لعرض الجهاز : 375 بكسل){}دعم أحداث لوحة المفاتيح للإدخال، والضغط على المفتاح، والضغط على المفاتيح في نظام التشغيل IOS ليس جيدًا جدًا. من الممكن استخدام الإدخال لمراقبة حدث مفتاح لوحة المفاتيح في متصفح الهاتف المحمول الذي يعمل بنظام التشغيل Android المتصفح، لا يمكن الاستجابة للأحداث على الفور إلا بعد الحذف
الطريقة: يمكنك استخدام حدث oninput الخاص بـ html5 لاستبدال keyup
<input type=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< / البرنامج النصي>سيتم تجاوز تعيين نمط زر الإدخال على نظام التشغيل iOS بالنمط الافتراضي
الحل هو كما يلي:
الإدخال، منطقة النص { الحدود: 0 - مظهر Webkit: لا شيء؛}لا يدعم التخطيط المرن سمة التفاف: التفاف للإصدارات الأقل من Android، لكن نظام iOS يدعم سمة التفاف الخط. كيف يمكن حل هذه المشكلة؟ بالطبع، لا تستخدم فواصل الأسطر واستخدم طرقًا أخرى بدلاً من ذلك.
.box{ Display: -webkit-box; /* بناء جملة الإصدار القديم: متصفح Safari، iOS، Android، متصفحات WebKit الأقدم */ Display: -moz-box; -ms-flexbox; /* بناء جملة الإصدار المختلط: IE 10 */ العرض: -webkit-flex; /* بناء جملة الإصدار الجديد: Chrome 21+ */ العرض: flex; 12.1، فايرفوكس 22+ */ستعمل سمة العنصر النائب للإدخال على وضع النص لأعلى
ارتفاع الخط: (نفس ارتفاع صندوق الإدخال) ---حل الكمبيوتر
ارتفاع الخط: عادي --- الحل المحمول
بعد نوع الإدخال=الرقم، تظهر الأسهم لأعلى ولأسفل على جانب الكمبيوتر
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none! هامش مهم: 0;}قم بتمكين الهواتف المحمولة التي تعمل بنظام Android وiOS من فتح الكاميرا واختيار وظيفة ألبوم الصور
<input class=js_upFile Cover1 type=file name=cover Accept=image/*capture=camera multiple/>$(function () { // احصل على وكيل المستخدم الخاص بالمتصفح وقم بتحويله إلى أحرف صغيرة var ua = navigator.userAgent.toLowerCase() // تحديد ما إذا كان هاتف Apple، إذا كان الأمر كذلك، فهذا صحيح var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1 if (isIos) { $(input:file).removeAttr(capture };});ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.