1. เมื่อดูภาพพื้นหลังด้วยเบราว์เซอร์ Android อุปกรณ์บางตัวจะเบลอ
มันชัดเจนมากบนพีซีที่มีสัดส่วนของรูปภาพเท่ากัน แต่มันพร่ามัวมากบนโทรศัพท์ เหตุผลคืออะไร?
หลังจากการวิจัยมันเป็นอุปกรณ์ PixelRatio ที่ทำให้เกิดปัญหา เนื่องจากความละเอียดของโทรศัพท์มือถือมีขนาดเล็กเกินไปหากหน้าเว็บแสดงขึ้นตามความละเอียดคำจะเล็กมาก ดังนั้น Apple จึงเริ่มแสดงความละเอียดของ 960640 ของ iPhone 4 บนหน้าเว็บดังนั้น DevicePixelRatio = 2 ตอนนี้ Android ค่อนข้างยุ่งด้วย 1.5, 2 และ 3
หากคุณต้องการให้รูปภาพแสดงได้ชัดเจนขึ้นบนโทรศัพท์ของคุณคุณต้องใช้ภาพพื้นหลัง 2x แทนแท็ก IMG (โดยทั่วไป 2 ครั้ง) ตัวอย่างเช่นความกว้างและความสูงของ DIV คือ 100100 ภาพพื้นหลังจะต้องเป็นปี 200200 และจากนั้นขนาดพื้นหลัง: มี; เพื่อให้ภาพที่แสดงจะชัดเจนขึ้น
รหัสสามารถมีดังนี้:
ความเป็นมา: URL (../ images/icon/all.png) ศูนย์กลางที่ไม่มีการทำซ้ำ--webkit-background-size: 50px 50px; ขนาดพื้นหลัง: 50px 50px; แสดง: inline-block; ความกว้าง: 100%; ความสูง: 50px;
หรือระบุขนาดพื้นหลัง: มี; โปรดลองดูสิ!
2. การโหลดรูปภาพ
หากคุณพบปัญหาของการโหลดภาพช้าในกรณีนี้การพัฒนาโทรศัพท์มือถือโดยทั่วไปใช้วิธีการโหลด Canvas เพื่อโหลด:
สำหรับ Canvas API เฉพาะโปรดดูที่: http://javascript.ruanyifeng.com/htmlapi/canvas.html
นี่คือตัวอย่างของผืนผ้าใบ:
<li> <anvas> </anvas> </li>
JS กำลังโหลดรูปภาพและ li แบบไดนามิก มีภาพรวม 17 ภาพ!
var total = 17; var zwin = $ (หน้าต่าง); 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+'"> </canvas> </li>'; var imageObj = ภาพใหม่ (); imageObj.index = i; imageObj.onload = function () {var cvs = $ ('#cvs _'+this.index) [0] .getContext ('2d'); cvs.width = this.width; cvs.height = this.height; cvs.drawimage (นี้, 0,0); } imageObj.src = imgsrc; }} render ();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 = "ผู้ใช้-scalable = 0" />
แต่เพื่อความเข้ากันได้ดีขึ้นเราจะใช้การตั้งค่า Viewport แบบเต็ม
การคัดลอกรหัสมีดังนี้:
<meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ระดับสูงสุด = 1.0, ผู้ใช้-scalable = 0" />
แน่นอนว่าผู้ใช้สามารถลดขนาดได้ = 0 และบางคนก็เขียนผู้ใช้-scalable = ไม่ซึ่งทั้งสองอย่างนั้นก็โอเค5. Apple-Mobile-Web-App-Capable
Apple-Mobile-Web-App-Capable คือการตั้งค่าว่าเว็บแอปพลิเคชันทำงานในโหมดเต็มหน้าจอหรือไม่
ไวยากรณ์:
<meta name = "apple-mobile-web-app-appable" content = "ใช่">>
ภาพประกอบ:
หากเนื้อหาถูกตั้งค่าเป็นใช่เว็บแอปพลิเคชันจะทำงานในโหมดเต็มหน้าจอมิฉะนั้นจะไม่ ค่าเริ่มต้นของเนื้อหาคือไม่แสดงการแสดงผลปกติ คุณสามารถใช้หน้าต่างคุณสมบัติแบบอ่านได้อย่างเดียว navigator.standalone เพื่อตรวจสอบว่าหน้าเว็บจะแสดงในโหมดเต็มหน้าจอหรือไม่
6. การตรวจจับรูปแบบ
การตรวจจับรูปแบบเปิดใช้งานหรือปิดใช้งานหมายเลขโทรศัพท์ในหน้าการจดจำอัตโนมัติ
ไวยากรณ์:
<meta name = "การตรวจจับรูปแบบ" เนื้อหา = "โทรศัพท์ = no">>
ภาพประกอบ:
โดยค่าเริ่มต้นอุปกรณ์จะรับรู้สตริงใด ๆ ที่อาจเป็นหมายเลขโทรศัพท์โดยอัตโนมัติ การตั้งค่าโทรศัพท์ = ไม่สามารถปิดการใช้งานคุณสมบัตินี้ได้
7. HTML5 เรียกฟังก์ชั่นการโทรของ Android หรือ iOS
HTML5 มีแท็กที่เรียกการโทรโดยอัตโนมัติเพียงเพิ่มโทรศัพท์: ใน href ของแท็กแท็ก
ดังนี้:
<a href = "โทรศัพท์: 4008106999,1034"> 400-810-6999 หันไป 1034 </a>
โทรหาคุณโดยตรงดังนี้
<a href = "โทรศัพท์: 15677776767"> คลิกเพื่อโทร 15677776767 </a>
8. ฟังก์ชั่นการวางตำแหน่ง HTML5GPS
สำหรับรายละเอียดโปรดดู: //www.vevb.com/post/html5_gps_getcurrentposition
9. เมื่อดึงแถบเลื่อนขึ้นและลงมันจะติดอยู่หรือช้า
ร่างกาย {-webkit-overflow-scrolling: touch; การเลื่อนล้น: touch;}Android3+ และ iOS5+ สนับสนุนแอตทริบิวต์ใหม่ของ CSS3 นั้นเป็นแบบเลื่อนล้นล้น
10. ห้ามคัดลอกหรือเลือกข้อความ
องค์ประกอบ {-webkit-user-select: ไม่มี; -moz-user-select: ไม่มี; -khtml-user-select: ไม่มี; ผู้ใช้เลือก: ไม่มี;}แก้ไขข้อความของหน้าเว็บที่สามารถเลือกได้สำหรับอุปกรณ์มือถือ (ขึ้นอยู่กับความต้องการของผลิตภัณฑ์)
11. กดหน้าค้างไว้เป็นเวลานานและผิดพลาด
องค์ประกอบ {-webkit-touch-callout: ไม่มี;}12. เงาเริ่มต้นในกล่องอินพุตภายใต้ iPhone และ iPad
องค์ประกอบ {-webkit -Appearance: ไม่มี; -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: appart {color: #fff;} </style> <a herf = foo> bar </a> <script> document.addeventListener ('touchstart', function () {}, false);15. นิยามภาพเคลื่อนไหว 3D เปิดใช้งานฮาร์ดแวร์เร่งความเร็ว
องค์ประกอบ {-webkit -transform: translate3d (0, 0, 0) แปลง: translate3d (0, 0, 0);}หมายเหตุ: การเสียรูป 3D จะใช้หน่วยความจำและพลังงานมากขึ้น
16. 1px Screen ของจอประสาทตา
องค์ประกอบ {Border-Width: Thin;}17. การประมวลผลที่เข้ากันได้กับหน้ากาก WebKit Mask
โทรศัพท์ระดับต่ำบางรุ่นไม่รองรับหน้ากาก CSS3 และสามารถลดระดับได้
ตัวอย่างเช่นคุณสามารถใช้ JS Judgement เพื่ออ้างถึงคลาสที่แตกต่างกัน:
if ('webKitmask' ใน document.documentelement.style) {Alert ('s สนับสนุนหน้ากาก');} else {alert ('s ไม่รองรับหน้ากาก');}18. ปัญหาการปรับขนาดตัวอักษรเมื่อหมุนหน้าจอ
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-size-size: 100%;}19. หน้าจอแฟลชทรานซิชัน
/ตั้งค่าองค์ประกอบที่ฝังอยู่ในพื้นที่ 3 มิติ: รักษารูปแบบ 3D/-webkit-transform: Preserve-3d;/ตั้งค่าว่าด้านหลังขององค์ประกอบที่แปลงจะปรากฏให้เห็นเมื่อหันหน้าเข้าหาผู้ใช้: ซ่อน/-webkit-backface-visibility: ซ่อน;
20. บั๊กมุมกลม
โทรศัพท์ Android บางรุ่นมีมุมโค้งมนล้มเหลว
คลิปพื้นหลัง: ช่องว่าง:;
21. สีพื้นหลังแถบสถานะด้านบน
<meta name = "apple-mobile-web-app-status-bar-bar-bar-bar"
ภาพประกอบ:
หากคุณไม่ได้ใช้ Apple-Mobile-Web-App ที่สามารถระบุโหมดเต็มหน้าจอได้เมตาแท็กนี้จะไม่ทำงาน
หากเนื้อหาถูกตั้งค่าเป็นค่าเริ่มต้นแถบสถานะจะแสดงตามปกติ หากตั้งค่าเป็นว่างแถบสถานะจะมีพื้นหลังสีดำ หากตั้งค่าเป็น blank-translucent แถบสถานะจะปรากฏสีดำโปร่งแสง หากตั้งค่าเป็นค่าเริ่มต้นหรือว่างเปล่าหน้าจะแสดงอยู่ด้านล่างแถบสถานะนั่นคือแถบสถานะจะอยู่ที่ส่วนบนและหน้าส่วนล่าง ทั้งสองไม่ถูกบล็อกโดยอีกฝ่ายหรือถูกบล็อก หากตั้งค่าเป็น blank-translucent หน้าจะเติมหน้าจอซึ่งด้านบนของหน้าถูกปกคลุมด้วยแถบสถานะ (ครอบคลุมความสูงของหน้าโดย 20px ในขณะที่หน้าจอเรติน่าสำหรับ iPhone4 และ Itouch4 คือ 40px) ค่าเริ่มต้นคือค่าเริ่มต้น
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" ขนาด = "76x76" href = "touch-icon-ipad.png" /> <link rel = "Apple-touch-icon" ขนาด = "152x152" href = "touch-icon-ipad-retina.png" />>
กำหนดไอคอนเดสก์ท็อปที่แตกต่างกันสำหรับอุปกรณ์ต่าง ๆ ภายใต้ iOS หากไม่ได้กำหนดให้ใช้ภาพหน้าจอปัจจุบันเป็นไอคอน
วิธีการเขียนข้างต้นอาจคิดว่ามีความเงาเริ่มต้น วิธีการตั้งค่าต่อไปนี้สามารถลบเอฟเฟกต์เงาและกู้คืนเอฟเฟกต์ของการวาดการออกแบบ!
<link rel = "Apple-touch-icon-precomposed" href = "touch-icon-iphone.png" />
ขนาดภาพสามารถตั้งค่าเป็น 5757 (px) หรือเรตินาสามารถตั้งค่าเป็น 114114 (px) และขนาด iPad คือ 72*72 (px)
24. หน้าจอเริ่ม
<link rel = "Apple-touch-startup-image" href = "start.png"/>>>>>
รูปภาพที่แสดงเมื่อหน้าเริ่มโหลดภายใต้ iOS คือการหลีกเลี่ยงหน้าจอสีขาวเมื่อโหลด
สามารถระบุขนาดที่แตกต่างกันผ่านเมทริกซ์:
<!-iPhone-> <link href = "Apple-Touch-Startup-Image-320x460.png" Media = "(อุปกรณ์ความกว้าง: 320px)" rel = "Apple-Touch-Startup-Image" /> <! (-webkit-device-pixel-ratio: 2) "rel =" Apple-touch-startup-image " /> <!-iPhone 5-> <link rel =" Apple-Touch-Startup-Image "Media =" (อุปกรณ์กว้าง: 320px) และ (ความสูงของอุปกรณ์: 568px) HREF = "Apple-Touch-Startup-Image-640x1096.png"> <!-ภาพบุคคล iPad-> <link href = "Apple-Touch-startup-Image-768x1004.png" Media = "(อุปกรณ์-ความกว้าง: 768px) HREF = "Apple-Touch-Startup-Image-748x1024.png" Media = "(อุปกรณ์ความกว้าง: 768px) และ (การวางแนว: Landscape)" Rel = "Apple-Touch-Startup-Image" /> <! 1536px) และ (การวางแนว: ภาพบุคคล) และ (-webkit-device-pixel-ratio: 2) "rel =" Apple-Touch-Startup-Image " /> <! (-webkit-Device-Pixel-Ratio: 2) "Rel =" Apple-Touch-Startup-Image " />
25. เบราว์เซอร์ส่วนตัวและเมตาอื่น ๆ
แอตทริบิวต์ต่อไปนี้ยังไม่ได้ใช้ในโครงการคุณสามารถเขียนตัวอย่างเพื่อทดสอบสิ่งต่อไปนี้!
เบราว์เซอร์ QQ ส่วนตัว
โหมดเต็มหน้าจอ
<meta name = "x5-fullscreen" content = "true">
หน้าจอแนวตั้งบังคับ
<meta name = "x5-erientation" content = "portrait">
หน้าจอแนวนอนบังคับ
<meta name = "x5-erientation" content = "Landscape">
โหมดแอปพลิเคชัน
<meta name = "x5-page-mode" content = "app">
เบราว์เซอร์ UC ส่วนตัว
โหมดเต็มหน้าจอ
<meta name = "เต็มหน้าจอ" เนื้อหา = "ใช่">
หน้าจอแนวตั้งบังคับ
<meta name = "screen-erientation" content = "portrait">
หน้าจอแนวนอนบังคับ
<meta name = "การวางแนวหน้าจอ" เนื้อหา = "ภูมิทัศน์">
โหมดแอปพลิเคชัน
<meta name = "browsermode" content = "application">
อื่น
เหมาะสำหรับอุปกรณ์พกพาส่วนใหญ่สำหรับเบราว์เซอร์เก่าบางตัวที่ไม่รู้จักวิวพอร์ตเช่น BlackBerry
<meta name = "handheldifriendly" content = "true">
เบราว์เซอร์เก่าของ Microsoft
<meta name = "mobileoptimized" content = "320">
Windows Phone คลิกโดยไม่มีไฮไลต์
<meta name = "msapplication-tap-highlight" content = "no">>
26. การสนับสนุน Keyup, Keydown และ Keypress ใน iOS นั้นไม่ค่อยดีนัก
ปัญหาคือ: เมื่อใช้การค้นหาอินพุตสำหรับการค้นหาฟัซซี่ป้อนคำหลักในคีย์บอร์ดและสอบถามผ่านพื้นหลัง AJAX จากนั้นส่งคืนข้อมูลแล้วทำเครื่องหมายคำหลักสำหรับข้อมูลที่ส่งคืน มันก็โอเคที่จะใช้อินพุตเพื่อตรวจสอบเหตุการณ์แป้นพิมพ์คีย์บอร์ดในเบราว์เซอร์มือถือ Android แต่เปลี่ยนเป็นสีแดงช้ามากใน iOS มือถือเบราว์เซอร์ หลังจากการป้อนข้อมูลโดยใช้วิธีการป้อนข้อมูลเหตุการณ์ KeyUp จะไม่สอดคล้องกันทันที มันสามารถสอดคล้องกันหลังจากการลบ!
สารละลาย:
คุณสามารถใช้เหตุการณ์ OnInput ของ HTML5 เพื่อแทนที่ KeyUp
<อินพุต type = "text" id = "testinput"> <script type = "text/javascript"> document.getElementById ('testInput'). addEventListener ('อินพุต', ฟังก์ชัน (e) {var value = e.target.value;});จากนั้นคุณจะได้รับเอฟเฟกต์แบบคีย์อัพ!
27. ปัญหาของการตั้งค่าการป้อนเว็บไซต์ H5 เป็น type = number
การตั้งค่าประเภทของอินพุตของหน้าเว็บ H5 เป็นหมายเลขโดยทั่วไปจะทำให้เกิดปัญหาสามประการ ปัญหาหนึ่งคือแอตทริบิวต์ MaxLength ไม่ใช่เรื่องง่าย อีกอันหนึ่งคือเมื่อส่งแบบฟอร์มมันจะถูกปัดตามค่าเริ่มต้น ประการที่สามโทรศัพท์ Android บางรุ่นมีปัญหาสไตล์
เมื่อปัญหาได้รับการแก้ไขแล้วฉันกำลังใช้ JS ดังนี้
<อินพุต type = "number" oninput = "checktextLength (นี่, 10)"> ฟังก์ชั่นตรวจสอบความยาว (obj, ความยาว) {ถ้า (obj.value.length> ความยาว) {obj.value = obj.value.substr (0, ความยาว); -คำถามที่ 2 เป็นเพราะค่าเริ่มต้นการส่งแบบฟอร์มเพื่อการตรวจสอบแบบฟอร์มการเริ่มต้นขั้นตอนคือ 1 และต้องตั้งค่าแอตทริบิวต์ขั้นตอน หากมีทศนิยม 2 ตำแหน่งวิธีการเขียนมีดังนี้:
<อินพุต type = "number" step = "0.01" />
เกี่ยวกับขั้นตอนฉันจะแนะนำสั้น ๆ ที่นี่ ในประเภทอินพุต = หมายเลขโดยทั่วไปลูกศรขึ้นและลงจะถูกสร้างขึ้นโดยอัตโนมัติ การคลิกลูกศรขึ้นจะเพิ่มขั้นตอนโดยค่าเริ่มต้น การคลิกลูกศรลงจะลดขั้นตอนโดยค่าเริ่มต้น ขั้นตอนเริ่มต้นในจำนวนคือ 1 นั่นคือขั้นตอน = 0.01 คุณสามารถอนุญาตอินพุตของ 2 ตำแหน่งทศนิยมและคลิกลูกศรขึ้นและลงเพื่อเพิ่ม 0.01 และลดลง 0.01 ตามลำดับ
หากใช้ขั้นตอนและนาทีร่วมกันค่าจะต้องอยู่ระหว่างขั้นต่ำและสูงสุด
ดูตัวอย่างต่อไปนี้:
<input 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, อินพุต [type = number] ::-webkit-outer-spin-button {-webkit-appearance: ไม่มี; มาร์จิ้น: 0;}28. รูปแบบปุ่มอินพุต iOS จะถูกเขียนทับด้วยสไตล์เริ่มต้น
การแก้ปัญหามีดังนี้:
อินพุต, textarea {border: 0; -webkit-appearance: ไม่มี; -ตั้งค่าสไตล์เริ่มต้นเป็นไม่มี
29. อินพุตตัวอักษรคีย์บอร์ด iOS, ตัวพิมพ์ใหญ่ตัวอักษรเริ่มต้นเริ่มต้น
วิธีแก้ปัญหา: ตั้งค่าคุณสมบัติต่อไปนี้
<อินพุต type = "text" autocapitalize = "ปิด" />
30. เลือกแบบเลื่อนลงเลือกตั้งค่าการจัดตำแหน่งขวา
การตั้งค่ามีดังนี้:
เลือกตัวเลือก {ทิศทาง: rtl;}31. การเปลี่ยนรูปแบบเบ้จะดำเนินการผ่านการแปลงการหมุนหมุนจะทำให้เกิด jagging
สามารถตั้งค่าได้ดังนี้:
-webkit-transform: หมุน (-4deg) Skew (10deg) Translatez (0); แปลง: หมุน (-4deg) เอียง (10deg) Translatez (0); โครงร่าง: 1px Solid RGBA (255,255,255,0)
32. มือถือคลิก 300ms ล่าช้า
300ms ยังคงยอมรับได้ แต่เราต้องแก้ปัญหาที่เกิดจาก 300ms 300ms ทำให้ประสบการณ์ผู้ใช้ไม่ดีมาก เพื่อแก้ปัญหานี้โดยทั่วไปเราใช้กิจกรรมแตะเพื่อแทนที่เหตุการณ์คลิกที่ด้านมือถือ
แนะนำให้ใช้ JS สองตัวที่หนึ่งคือ fastclick และอีกอันคือ tap.js
สำหรับความล่าช้า 300ms โปรดดู: http://thx.github.io/mobile/300ms-click-delay/
33. ปัญหาการเจาะปลายทางมือถือ
ตัวอย่างมีดังนี้:
<div id = "haorooms"> nod event test </div> <a href = "www.vevb.com"> www.vevb.com </a>
DIV เป็นหน้ากากตำแหน่งที่แน่นอนและดัชนี Z สูงกว่า A แท็กคือลิงค์ในหน้าเราผูกเหตุการณ์แตะกับ DIV:
$ ('#harooms'). on ('tap', function () {$ ('#harooms'). ซ่อน ();});เมื่อเราคลิกที่เลเยอร์หน้ากาก DIV จะหายไปตามปกติ แต่เมื่อเราคลิกที่เลเยอร์หน้ากากบนแท็ก A เราพบว่าลิงก์ A จะถูกกระตุ้นซึ่งเรียกว่าเหตุการณ์จุดผ่าน
เหตุผล:
TouchStart นำหน้า Touchend นำหน้าคลิก นั่นคือการคลิกทริกเกอร์ล่าช้าและเวลานี้ประมาณ 300ms กล่าวคือหน้ากากถูกซ่อนไว้หลังจากทริกเกอร์การแตะของเรา ในเวลานี้การคลิกยังไม่ได้รับการกระตุ้น หลังจาก 300ms การคลิกของเราจะทริกเกอร์ไปยังลิงค์ด้านล่างเนื่องจากหน้ากากถูกซ่อนไว้
แก้ปัญหา:
(1) ลองใช้เหตุการณ์สัมผัสเพื่อแทนที่เหตุการณ์คลิก ตัวอย่างเช่นใช้เหตุการณ์ touchend (แนะนำ)
(2) ใช้ fastclick, https://github.com/ftlabs/fastclick
(3) ใช้ PreventDefault เพื่อบล็อกการคลิกแท็ก
(4) ชะลอเวลา (300ms+) เพื่อจัดการกับเหตุการณ์ (ไม่แนะนำ)
(5) โดยทั่วไปข้างต้นสามารถแก้ไขได้ แต่ถ้ามันไม่ทำงานจริง ๆ มันจะถูกแทนที่ด้วยเหตุการณ์คลิก
ต่อไปนี้เป็นเหตุการณ์ touchend ดังต่อไปนี้:
$ ("#harooms"). on ("touchend", ฟังก์ชั่น (เหตุการณ์) {event.preventdefault ();});34. กำจัดหมายเลขส้อมใน IE10
อินพุต: -ms-clear {display: none;}35. เกี่ยวกับการเพิ่มประสิทธิภาพของฟอนต์บน iOS และ OS X (จะมีตัวอักษรที่ไม่สอดคล้องกันบนหน้าจอแนวนอนและแนวตั้ง ฯลฯ )
ขนาดตัวอักษรจะถูกรีเซ็ตเมื่อเบราว์เซอร์ iOS เป็นภูมิทัศน์ การตั้งค่าการปรับขนาดข้อความเป็นไม่มีใครสามารถแก้ปัญหาบน iOS ได้ แต่ฟังก์ชั่นการปรับขนาดตัวอักษรของ Safari ในเวอร์ชันเดสก์ท็อปจะไม่ถูกต้องดังนั้นทางออกที่ดีที่สุดคือการปรับขนาดข้อความให้เป็น 100%
-webkit-text-size-adjust: 100%;-MS-text-size-size-adjust: 100%; การปรับขนาดข้อความ: 100%;
36. เกี่ยวกับระบบ iOS เมื่อป้อนภาษาอังกฤษด้วยวิธีการป้อนข้อมูลภาษาจีนพื้นที่หนึ่งหกอาจปรากฏขึ้นระหว่างตัวอักษร
สามารถลบออกได้โดยปกติ
this.value = this.value.replace (// u2006/g, '');
37. ปัญหาความล้มเหลวในการเล่นเสียง AUDIO MOBILE HTML5
นี่ไม่ใช่ข้อผิดพลาด เนื่องจากการเล่นเสียงหรือวิดีโอโดยอัตโนมัติในหน้าเว็บจะทำให้เกิดปัญหาหรือการใช้การจราจรที่ไม่จำเป็นไปยังผู้ใช้ระบบ Apple และ Android มักจะห้ามการเล่นอัตโนมัติและการเล่นทริกเกอร์โดยใช้ JS ผู้ใช้จะต้องถูกเรียกใช้ก่อนที่จะสามารถเล่นได้
วิธีแก้ปัญหา: ก่อนที่จะสัมผัสกับผู้ใช้ TouchStart, Trigger Playback และ Pause (เสียงเริ่มโหลดแล้วใช้ JS เพื่อใช้งานอีกครั้ง)
รหัสโซลูชัน:
document.addeVentListener ('touchStart', function () {document.getElementsByTagname ('Audio') [0] .play (); document.getElementSbyTagname ('เสียง') [0] .pause ();});38. ปัญหาของตัวยึดตำแหน่งที่ไม่ได้รับการสนับสนุนในวันที่อินพุต HTML5 มือถือ
ฉันไม่คิดว่าจะมีทางออกที่ดีสำหรับสิ่งนี้ใช้วิธีการต่อไปนี้
การคัดลอกรหัสมีดังนี้:
<อินพุต placeholder = "วันที่" type = "text" onfocus = "(this.type = 'วันที่')" id = "วันที่">
เบราว์เซอร์บางตัวอาจต้องคลิกสองครั้ง!39. บางรุ่นมีอินพุตด้วยการค้นหาประเภทและวิธีการปรับเปลี่ยนรูปแบบปุ่มปิดของตัวเองมีให้
การควบคุมอินพุตการค้นหาบางรุ่นจะมาพร้อมกับปุ่มปิด (องค์ประกอบหลอก) และโดยปกติแล้วเพื่อให้เข้ากันได้กับเบราว์เซอร์ทั้งหมดเราจะนำไปใช้ด้วยตัวเอง ในเวลานี้วิธีการลบปุ่มปิดดั้งเดิมคือ
#Search ::-WebKit-Search-Cancel-Button {Display: None; -หากคุณต้องการใช้ปุ่ม Close Native และต้องการให้สอดคล้องกับสไตล์การออกแบบคุณสามารถปรับเปลี่ยนรูปแบบขององค์ประกอบหลอกนี้
40. กระตุ้นตัวเลือกในการขยาย
วิธี Zepto:
$ (sltelement) .trgger ("mousedown");วิธี JS พื้นเมือง:
ฟังก์ชั่น ShowDropDown (SLTELEMENT) {เหตุการณ์ var; event = document.createeevent ('MouseEvents'); event.initmousevent ('mousedown', true, true, window); sltelement.dispatchevent (เหตุการณ์);};