1. عند النظر إلى صورة الخلفية مع متصفح Android ، سيتم توطين بعض الأجهزة.
إنه واضح جدًا على جهاز كمبيوتر بنفس نسبة الصور ، لكنه ضبابي للغاية على الهاتف. ما هو السبب؟
بعد البحث ، كان DevicePixelRatio هو الذي تسبب في المشكلة. نظرًا لأن دقة الهاتف المحمول صغير جدًا ، إذا تم عرض صفحة الويب وفقًا للقرار ، فستكون الكلمات صغيرة جدًا. لذا ، عرضت Apple في البداية دقة iPhone 4's 960640 على صفحة الويب ، لذلك DevicePixelRatio = 2. الآن Android هو فوضوي للغاية ، مع 1.5 و 2 و 3.
إذا كنت تريد عرض الصورة بشكل أكثر وضوحًا على هاتفك ، فيجب عليك استخدام صورة خلفية 2x بدلاً من علامة IMG (بشكل عام ، مرتين). على سبيل المثال ، عرض وارتفاع DIV هو 100100 ، يجب أن تكون صورة الخلفية 200200 ، ثم حجم الخلفية: احتواء ؛ ، بحيث تكون الصورة المعروضة أكثر وضوحًا.
يمكن أن يكون الرمز كما يلي:
الخلفية: url (../ images/icon/all.png) مركز مركز عدم التكرار ؛ -webkit-background-size: 50px 50px ؛ حجم الخلفية: 50px 50px ؛ عرض: inline block ؛ العرض: 100 ٪ ؛ الارتفاع: 50 بكسل ؛
أو تحديد حجم الخلفية: احتواء ؛ إما ، من فضلك جربها!
2. تحميل الصورة
إذا واجهت مشكلة تحميل الصور البطيء ، في هذه الحالة ، يستخدم تطوير الهاتف المحمول عمومًا طريقة القماش لتحميلها:
للحصول على Canvas API ، يرجى الرجوع إلى: http://javaScript.ruanyifeng.com/htmlapi/Canvas.html
فيما يلي مثال على قماش:
<li> <canvas> </tanvas> </li>
JS تحميل الصور ديناميكيا ولي. يتم تقديم ما مجموعه 17 صورة!
إجمالي var = 17 ؛ var zwin = $ (window) ؛ var render = function () {var padding = 2 ؛ var winwidth = zwin.width () ؛ var picwidth = math.floor ((winwidth-padding*3)/4) ؛ var tmpl = '' ؛ لـ (var i = 1 ؛ i <= totla ؛ i ++) {var p = padding ؛ var imgsrc = 'img/'+i+'. jpg' ؛ if (i ٪ 4 == 1) {p = 0 ؛ } tmpl+= '<li> <canvas id = "cvs _'+i+'"> </tanvas> </li>' ؛ var imageObj = new Image () ؛ ImageObj.index = i ؛ ImageObj.onload = function () {var cvs = $ ('#cvs _'+this.index) [0] .getContext ('2d') ؛ cvs.width = this.width ؛ cvs.height = this.hight ؛ cvs.drawimage (هذا ، 0،0) ؛ } imageObj.src = imgsrc ؛ } } يجعل()؛3. إذا كان موقع الويب المحمول لا يحتاج إلى أن يكون متوافقًا مع متصفح IE ، فنحن نستخدم Zeptojs عمومًا . Zeptojs طريقة أحداث اللمس المدمجة ، يرجى الرجوع إلى http://zeptojs.com/#touch الأحداث
لقد ألقيت نظرة على الإصدار الجديد من Zeptio API ، والذي يدعم بالفعل IE10 أو أعلى المتصفحات ، ويمكنك اختيار استخدام Zeptojs!
4. منع صفحات الويب من توسيع وتقلص الهواتف المحمولة . هذه هي النقطة الأساسية. ما يجب أن يعرفه مطورو المواقع المحمولة أكثر من ذلك هو إعداد عرض Viewport في META.
أيضًا ، لقد رأينا البيان التالي على بعض مواقع الويب المحمولة:
نسخة الكود كما يلي:
<! doctype html public "-// wapforum // dtd xhtml mobile 1.0 // en" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd">
طريقة ضبط DTD هي XHTML. إذا كانت صفحتنا تستخدم HTML5 ، فيمكنك الإعلان مباشرة <! doctype html> دون تعيين DTD.
استخدم Viewport لمنع الصفحة من التكبير. عادةً ما قم بتعيين المستخدم على 0 لإيقاف تشغيل تحجيم المستخدم لعرض الصفحة.
<meta name = "viewport" content = "user-scalable = 0" />
ولكن من أجل توافق أفضل ، سوف نستخدم إعدادات المنفذ الكامل.
نسخة الكود كما يلي:
<meta name = "viewport" content = "width = width device ، sciale = 1.0 ، maximum scale = 1.0 ، ster-scalable = 0" />
بالطبع ، قابلة للتغيير في المستخدم = 0 ، وبعض الأشخاص يكتبون أيضًا قابلة للمعارضين = لا ، وكلاهما على ما يرام.5. Apple-Mobile-Web-App قادر
Apple-Mobile-Web-App قادر على تعيين ما إذا كان تطبيق الويب يعمل في وضع ملء الشاشة.
القواعد:
<meta name = "Apple-Mobile-Web-App-Conference Content =" Yes ">
يوضح:
إذا تم تعيين المحتوى على نعم ، فسيتم تشغيل تطبيق الويب في وضع ملء الشاشة ، وإلا فلن يتم ذلك. القيمة الافتراضية للمحتوى هي لا ، مما يشير إلى الشاشة العادية. يمكنك استخدام نافذة الخاصية للقراءة فقط. navigator.standalone لتحديد ما إذا كانت صفحة الويب معروضة في وضع ملء الشاشة.
6. التنسيق
يمكّن التنسيق أو يؤدي إلى تعطيل رقم الهاتف في صفحة التعرف التلقائي.
القواعد:
<meta name = "format-detection" content = "telephone = no">
يوضح:
بشكل افتراضي ، يتعرف الجهاز تلقائيًا على أي سلسلة قد تكون رقم هاتف. تعيين الهاتف = لا يمكن تعطيل هذه الميزة.
7. HTML5 يدعو وظيفة الاتصال بنظام Android أو iOS
يوفر HTML5 علامات الاتصال تلقائيًا ، فقط أضف هاتفًا: في HREF للعلامة A.
على النحو التالي:
<a href = "tel: 4008106999،1034"> 400-810-6999.
اتصل على هاتفك مباشرة على النحو التالي
<a href = "tel: 15677776767"> انقر للاتصال 15677776767 </a>
8. وظيفة تحديد موقع HTML5GPS
للحصول على تفاصيل ، يرجى الاطلاع على: //www.vevb.com/post
9. عند سحب شريط التمرير لأعلى ولأسفل ، يكون عالقًا أو بطيئًا
body {-webkit-overflow-scrolling: touch ؛ تفكيك الفائض: touch ؛}Android3+ و IOS5+ دعم css3 سمات جديدة
10. نسخ أو اختيار النص محظور
element {-webkit-user-select: none ؛ -الموز المستخدم: لا شيء ؛ -Khtml-User-select: لا شيء ؛ تخطي المستخدم: لا شيء ؛}حل نص الصفحة التي يمكن تحديدها للأجهزة المحمولة (اعتمادًا على احتياجات المنتج)
11. اضغط مع الاستمرار على الصفحة لفترة طويلة وتحطم
العنصر {-webkit-touch-callout: none ؛}12. الظلال الافتراضية في مربع الإدخال أسفل iPhone و iPad
element {-webkit -Areplance: none ؛ }13. القناع الرمادي الشفاف يظهر عند لمس العناصر تحت iOS و Android
العنصر {-webkit-tap-highlight-color: RGBA (255،255،255،0)}يمكن ضبط قيمة ألفا على 0 إزالة القناع الرمادي الشفاف. ملاحظة: قيمة خاصية الشفافة غير صالحة تحت Android.
المقالة التالية لها مقدمة مفصلة ، العنوان: http://www.vevb.com/post/phone_web_ysk
14. معالجة التوافق النشط هي الفئة الزائفة: نشط غير صالح
الطريقة 1: إضافة onTouchStart إلى الجسم
<body onTouchStart = "">
الطريقة 2: يربط JS أحداث TouchStart أو Touchend للتوثيق
<Style> a {color: #000 ؛} a: Active {color: #fff ؛} </style> <a herf = foo> bar </a> <script> document.addeventListener ('touchstart' ، function () {} ، false) ؛ </script>15. تعريف الرسوم المتحركة 3D يتيح تسريع الأجهزة
element {-webkit -transform: translate3d (0 ، 0 ، 0) transform: translate3d (0 ، 0 ، 0) ؛}ملاحظة: سوف يستهلك تشوه ثلاثي الأبعاد المزيد من الذاكرة والقوة
16. 1 بكسل حدود شاشة شبكية العين
العنصر {عرض الحدود: رقيقة ؛}17. معالجة متوافقة مع قناع WebKit
لا تدعم بعض الهواتف المنخفضة قناع CSS3 ، ويمكن تخفيض تخفيضها اختياريًا.
على سبيل المثال ، يمكنك استخدام حكم JS للإشارة إلى فصول مختلفة:
if ('webkitmask' في المستند.18. قضايا ضبط حجم الخط عند تدوير الشاشة
HTML ، الجسم ، الشكل ، الحقول ، P ، DIV ، H1 ، H2 ، H3 ، H4 ، H5 ، H6 {-Webkit-Text-Size-Just: 100 ٪ ؛}19. شاشة فلاش الانتقال
/قم بتعيين كيفية تقديم العناصر المدمجة في الفضاء ثلاثي الأبعاد: الحفاظ على 3D/-WebKit-transform: PRESERVE-3D ؛/اضبط ما إذا كان الجزء الخلفي من العنصر الذي يتم تحويله مرئيًا عند مواجهة المستخدم: إخفاء/-webkit-backface-piticibility: مخفي ؛
20. علة الزاوية الدائرية
فشلت بعض هواتف أندرويد زوايا مدورة
Clip الخلفية: صندوق الحشوة ؛
21. لون شريط الحالة العلوي
<meta name = "Apple-Mobile-Web-App-Status-Bar-style" content = "Black" />
يوضح:
ما لم تكن تستخدم لأول مرة Apple-Mobile-Web-App قادرة على تحديد وضع ملء الشاشة ، فلن تعمل علامة التعريف هذه.
إذا تم تعيين المحتوى على الافتراضي ، فسيتم عرض شريط الحالة بشكل طبيعي. إذا تم ضبطه على فارغ ، فسيحتوي شريط الحالة على خلفية سوداء. إذا تم ضبطه على ترجمة فارغة ، فإن شريط الحالة يبدو شفافًا أسود. إذا تم تعيينه على الافتراضي أو فارغًا ، فسيتم عرض الصفحة أسفل شريط الحالة ، أي أن شريط الحالة يشغل الجزء العلوي وتحتل الصفحة الجزء السفلي. كلاهما غير محظور من قبل الطرف الآخر أو يتم حظره. إذا تم ضبطها على ترجمة فارغة ، فإن الصفحة تملأ الشاشة ، حيث يتم تغطية الجزء العلوي من الصفحة بواسطة شريط الحالة (يغطي ارتفاع الصفحة بمقدار 20 بكسل ، في حين أن شاشة Retina لـ iPhone4 و ITouch4 هي 40 بكسل). القيمة الافتراضية افتراضية.
22. إعداد ذاكرة التخزين المؤقت
<meta http-equiv = "cache-control" content = "no-cache" />
عادةً ما يتم تخزين صفحات الهاتف المحمول بعد التحميل الأول ، ويستخدم كل تحديث ذاكرة التخزين المؤقت بدلاً من إعادة بناء الطلب إلى الخادم. إذا كنت لا ترغب في استخدام ذاكرة التخزين المؤقت ، فيمكنك تعيين عدم وجود آذان.
23. أيقونات سطح المكتب
<link rel = "apple-touch-icon" href = "touch-icon-iphone.png" /> <link rel = "Apple-touch-icon" sister = "76x76" href = "touch-icon-ipad.png" /> <link rel = "Apple-touch-icon" sizes = 120x120 " Rel = "Apple-touch-icon" أحجام = "152x152" href = "touch-icon-ipad-retina.png" />
حدد أيقونات سطح المكتب المختلفة للأجهزة المختلفة تحت iOS. إذا لم يتم تعريفه ، استخدم لقطة الشاشة الحالية كرمز.
قد يُعتقد أن طريقة الكتابة أعلاه لها لمعان افتراضي. يمكن أن تزيل طريقة الإعداد التالية تأثير اللمعان واستعادة تأثير رسم التصميم!
<link rel = "Apple-touch-icon-spection" href = "touch-icon-iphone.png" />
يمكن ضبط حجم الصورة على 5757 (PX) أو يمكن ضبط شبكية العين على 114114 (PX) ، وحجم iPad هو 72*72 (PX)
24. ابدأ الشاشة
<link rel = "Apple-touch-startup-emage" href = "start.png"/>
الصورة المعروضة عند بدء تحميل الصفحة تحت iOS هي تجنب الشاشة البيضاء عند التحميل.
يمكن تحديد أحجام مختلفة من خلال المصفوفة:
<!-iPhone-> <link href = "Apple-touch-startup-image-320x460.png" media = "(width device: 320px)" rel = "Apple-touch-Startup-dimage" /> <!-iPhone Retina-> <Link Href = "Apple-touch-Startup-image-640x920.png" Media = (-webkit-device-pixel-ratio: 2) "Rel =" Apple-touch-Startup-Image " /> <!-iPhone 5-> <link rel =" Apple-touch-startup-dimage "media =" (width: 320px) و (الجهاز-هير: 568px) href = "Apple-touch-startup-dimage-640x1096.png"> <!-iPad portrait-> <link href = "Apple-touch-Startup-dimage-768x1004.png" Media = "(Device-Width: 768px) HREF = "Apple-Touch-Startup-Image-748x1024.png" Media = "(Width Width: 768px) و (الاتجاه: Landscape)" Rel = "Apple-Touch-Startup-Image" /> <! 1536px) و (الاتجاه: صورة) و (-webkit-device-pixel-ratio: 2) "Rel =" Apple-touch-Startup-Image " /> <!-iPad Retina Landscape-> <Link Href =" Apple-Touch-Startup-Dimage-146x2048.png " (-webkit-device-pixel-ratio: 2) "rel =" Apple-touch-Startup-Image " />
25. المتصفح الخاص وغيرها من التعريف
لم يتم تطبيق السمات التالية في المشروع ، يمكنك كتابة عرض تجريبي لاختبار ما يلي!
QQ متصفح خاص
وضع ملء الشاشة
<meta name = "x5-fullscreen" content = "true">
الشاشة الرأسية القسرية
<meta name = "x5-orivitation" content = "portrait">
الشاشة الأفقية القسرية
<meta name = "x5-orivitation" content = "landscape">
وضع التطبيق
<meta name = "x5-page-mode" content = "app">
متصفح UC خاص
وضع ملء الشاشة
<meta name = "screen" content = "yes">
الشاشة الرأسية القسرية
<meta name = "screen-orivation" content = "portrait">
الشاشة الأفقية القسرية
<meta name = "screen-orivation" content = "landscape">
وضع التطبيق
<meta name = "browsermode" content = "application">
آخر
تم تحسينه للأجهزة المحمولة ، وخاصة لبعض المتصفحات القديمة التي لا تتعرف على منصات العرض ، مثل BlackBerry
<meta name = "handheldriend" content = "true">
متصفح Microsoft القديم
<meta name = "mobileOptimized" content = "320">
Windows Phone انقر بدون أبرز
<meta name = "msapplication-tap-highlight" content = "no">
26. Keyup و Keydown و Keypress في iOS ليس جيدًا جدًا
المشكلة هي: عند استخدام البحث عن الإدخال عن البحث الغامض ، أدخل الكلمات الرئيسية في لوحة المفاتيح ، والاستعلام من خلال خلفية Ajax ، ثم إرجاع البيانات ، ثم وضع علامة على الكلمات الرئيسية للبيانات التي تم إرجاعها. لا بأس في استخدام الإدخال لمراقبة أحداث Keyup لوحة المفاتيح في متصفحات Android Mobile ، ولكنها تتحول إلى اللون الأحمر ببطء شديد في متصفحات iOS للهاتف المحمول. بعد الإدخال باستخدام طريقة الإدخال ، لا يكون حدث keyup مطابقًا على الفور. يمكن أن يكون فقط المقابلة بعد الحذف!
حل:
يمكنك استخدام حدث ONINPUT لـ HTML5 لاستبدال keyup
<type type = "text" id = "testInput"> <script type = "text/javaScript"> document.getElementById ('testInput'). addeventListener ('input' ، function (e) {var value =ثم ستحقق تأثيرًا يشبه Keyup!
27. مشكلة تعيين إدخال موقع H5 إلى الكتابة = الرقم
يؤدي إعداد نوع إدخال صفحة الويب H5 إلى الرقم عمومًا إلى ثلاث مشاكل. إحدى المشكلات هي أن سمة MaxLength ليست سهلة الاستخدام. الآخر هو أنه عند تقديم النموذج ، يتم تقريبه افتراضيًا. ثالثًا ، يعاني بعض هواتف Android من مشاكل في الأناقة.
بمجرد حل المشكلة ، أستخدم حاليًا JS. على النحو التالي
<type type = "number" oninput = "checktextLength (this ، 10)"> checktextLength (obj ، length) {if (obj.value.length> length) {obj.value = obj.value.substr (0 ، length) ؛ }}السؤال 2 هو بسبب تقديم النموذج الافتراضي للتحقق من النماذج ، والخطوة الافتراضية هو 1 ، ويجب تعيين سمة الخطوة. إذا تم الاحتفاظ بمكانين عشريين ، فإن طريقة الكتابة هي كما يلي:
<type type = "number" step = "0.01" />
فيما يتعلق بالخطوة ، سأقدم مقدمة موجزة هنا. في نوع الإدخال = الرقم ، سيتم إنشاء سهم لأعلى ولأسفل بشكل عام تلقائيًا. سيؤدي النقر فوق السهم إلى إضافة خطوة افتراضيًا. سيؤدي النقر فوق السهم لأسفل إلى تقليل الخطوة افتراضيًا. الخطوة الافتراضية في الرقم هي 1. أي الخطوة = 0.01 ، يمكنك السماح بإدخال مكانين عشريين ، والنقر فوق الأسهم لأعلى ولأسفل لزيادة 0.01 وتقليل 0.01 على التوالي.
إذا تم استخدام الخطوة والدقيقة معًا ، فيجب أن تكون القيمة بين Min و Max.
انظر المثال التالي:
<type type = "number" step = "3.1" min = "1" />
ما هي الأرقام التي يمكن إدخالها في مربع الإدخال؟
أولاً ، إذا كانت القيمة الدنيا هي 1 ، فيمكنك إدخال 1.0 ، والثاني هو الدخول (1+3.1) ، أي 4.1 ، وهكذا ، ستزداد كل نقرة على السهم لأعلى ولأسفل بمقدار 3.1 ، وستكون إدخال الأرقام الأخرى غير صالحة. هذا هو مقدمة موجزة للخطوة.
السؤال 3: قم بإزالة نمط الإدخال الافتراضي
إدخال [type = number] {-Moz-Appearance: textfield ؛} الإدخال [type = number] ::-webkit-inner-spin-button ، input [type = number] ::-webkit-outer-spin-button {-webkit-apparance: none ؛ الهامش: 0 ؛}28. سيتم كتابة نمط زر إدخال IOS إعداد النمط الافتراضي
الحل كما يلي:
المدخلات ، textarea {الحدود: 0 ؛ -بكيت ظهور: لا شيء ؛ }اضبط النمط الافتراضي على لا شيء
29. إدخال حرف لوحة مفاتيح iOS ، رسملية الحروف الأولية الافتراضية
الحل: اضبط الخصائص التالية
<type type = "text" Autocapitalize = "Off" />
30. حدد المنسدلة حدد ضبط المحاذاة اليمنى
الإعدادات كما يلي:
حدد الخيار {الاتجاه: rtl ؛}31. يتم تنفيذ تشوه الانحراف من خلال التحويل ، ودوران الدوران سيؤدي إلى نزح
يمكن تعيينه على النحو التالي:
-webkit-transform: تدوير (-4deg) انحراف (10deg) Translatez (0) ؛ التحويل: تدوير (-4deg) انحراف (10deg) Translatez (0) ؛ المخطط التفصيلي: 1 بكسل Solid RGBA (255،255،255،0)
32. انقر فوق الجوال 300 مللي ثانية تأخير
لا يزال 300 مللي ثانية مقبولًا ، لكن يجب علينا حل المشكلة الناجمة عن 300 مللي ثانية. 300 مللي ثانية تسبب تجربة المستخدم ليست جيدة جدا. لحل هذه المشكلة ، نستخدم بشكل عام أحداث TAP لاستبدال أحداث النقر على جانب الهاتف المحمول.
ينصح اثنان من JS ، والآخر سريع والآخر هو TAP.JS
لتأخير 300 مللي ثانية ، يرجى الاطلاع على: http://thx.github.io/mobile/300ms click-delay/
33. مشكلة اختراق نقطة النهاية المتنقلة
الأمثلة على النحو التالي:
<div id = "haorooms"> اختبار حدث NOD </div> <a href = "www.vevb.com"> www.vevb.com </a>
DIV هو قناع تحديد المواقع المطلق ، و z-index أعلى من أ. العلامة A عبارة عن رابط في الصفحة ، نربط حدث TAP بـ DIV:
$ ('#harooms'). on ('tap' ، function () {$ ('#harooms'). Hide () ؛}) ؛عندما نضغط على طبقة القناع ، يختفي DIV بشكل طبيعي ، ولكن عندما نضغط على طبقة القناع على العلامة A ، نجد أن الرابط A يتم تشغيله ، والذي يسمى حدث نقطة.
سبب:
TouchStart يسبق اللمس السابق النقر. وهذا هو ، انقر انقر التأخير تأخر ، وهذه المرة حوالي 300 مللي ثانية. وهذا يعني أن القناع مخفي بعد مشغلات الصنبور لدينا. في هذا الوقت ، لم يتم تشغيل النقر. بعد 300 مللي ثانية ، ينطلق النقرات الخاصة بنا إلى الرابط أدناه لأن القناع مخفي.
يحل:
(1) حاول استخدام حدث Touch لاستبدال حدث النقر. على سبيل المثال ، استخدم حدث Touchend (موصى به).
(2) استخدم Fastclick ، https://github.com/ftlabs/fastclick
(3) استخدم PreventDefault لحظر النقر على علامة
(4) تأخير وقت معين (300 مللي ثانية+) للتعامل مع الأحداث (غير موصى به)
(5) يمكن حل ما سبق عمومًا ، ولكن إذا لم ينجح الأمر حقًا ، فسيتم استبداله بحادث نقرة.
ما يلي هو حدث اللمس ، على النحو التالي:
$ ("#harooms"). on ("touchend" ، function (event) {event.preventDefault () ؛}) ؛34. قم بإزالة رقم الشوكة في IE10
الإدخال: -Ms-clear {display: none ؛}35. فيما يتعلق بتحسين الخطوط على iOS و OS X (سيكون هناك خط غير متناسق على الشاشات الأفقية والرأسية ، إلخ)
سيتم إعادة تعيين حجم الخط عندما يكون متصفح iOS ذو مناظر طبيعية. يمكن أن يكون ضبط حجم النصي إلى حد ما حل المشكلة على iOS ، لكن وظيفة تحجيم الخط في Safari على إصدار سطح المكتب ستكون غير صالحة ، وبالتالي فإن الحل الأفضل هو تحويل حجم النص إلى 100 ٪.
-webkit-text-size-adjust: 100 ٪ ؛-MS-text-size-adjust: 100 ٪ ؛ text-size-must: 100 ٪ ؛
36. حول نظام iOS ، عند إدخال اللغة الإنجليزية باستخدام طريقة الإدخال الصينية ، قد تظهر مساحة سادس واحد بين الحروف.
يمكن إزالتها بالمنتظم
this.value = this.value.replace (// u2006/g ، '') ؛
37.
هذا ليس خطأ. نظرًا لأن تشغيل الصوت أو الفيديو التلقائي في صفحات الويب سيؤدي إلى بعض المشاكل أو استهلاك حركة المرور غير الضروري للمستخدمين ، فإن أنظمة Apple و Android عادة ما تحظر التشغيل التلقائي وتشغيلها باستخدام JS. يجب أن ينشأه المستخدم قبل أن يتم تشغيله.
الحل: قم أولاً باللمس إلى المستخدم TouchStart ، وتشغيل التشغيل وتوقف مؤقتًا (يبدأ الصوت في التحميل ، ثم استخدم JS لتشغيله مرة أخرى).
رمز الحل:
document.addeventListener ('TouchStart' ، function () {document.getElementsByTagName ('Audio') [0] .play () ؛ document.getElementsByTagName ('Audio') [0] .pause () ؛}) ؛38. مشكلة العنصر النائب لا يتم دعمها في تاريخ إدخال HTML5 المحمول
لا أعتقد أن هناك أي حل جيد لهذا ، استخدم الطريقة التالية
نسخة الكود كما يلي:
<input placeholder = "date" type = "text" onfocus = "(this.type = 'date')" id = "date">
قد تحتاج بعض المتصفحات إلى النقر مرتين!39. بعض النماذج لها إدخال مع البحث عن النوع ، ويتم توفير طريقة تعديل نمط زر الإغلاق الخاصة بها.
ستأتي بعض نماذج عناصر التحكم في إدخال البحث مع زر إغلاق (عنصر زائفة) ، وعادة ما نتوافق مع جميع المتصفحات ، سنقوم بتنفيذ واحدة بأنفسنا. في هذا الوقت ، تكون طريقة إزالة زر الإغلاق الأصلي
#Search ::-WebKit-Search-Cancel-Button {Display: None ؛ }إذا كنت ترغب في استخدام زر الإغلاق الأصلي وتريد أن يتوافق مع نمط التصميم ، فيمكنك تعديل نمط هذا العناصر الزائفة.
40. شجع خيار التوسع
طريقة Zepto:
$ (sltelement) .trrgger ("mousedown") ؛طريقة JS الأصلية:
وظيفة showdropdown (sltelement) {var event ؛ event = document.createEvent ('mouseevents') ؛ event.initmousevent ('mousedown' ، true ، true ، window) ؛ sltelement.dispatchevent (event) ؛} ؛