ในอดีต ตอนที่ฉันทำงานบนพีซี ฉันมักจะประสบปัญหาความเข้ากันได้ แต่พูดตามตรง สิ่งเดียวที่ฉันมีอยู่ในใจคือปัญหา IE และไม่มีอะไรต้องใส่ใจเป็นพิเศษ อาจเป็นเพราะฉัน สรุปไม่เก่ง ตอนนี้ผมทำงานฝั่งมือถืออยู่ (เดิมทีผมว่าฝั่งมือถือมันง่ายมาก เลยไม่ได้คิดจริงจัง) เลยคิดผิด ผมจ่ายให้กับความดูถูกและความเย่อหยิ่งของตัวเอง!
เมื่อเร็วๆ นี้ ฉันพบข้อบกพร่องด้านความเข้ากันได้และพบข้อมูลบนอินเทอร์เน็ต
มาพูดถึงวิวพอร์ตกันก่อน
เทมเพลตก่อน
<meta charset=utf-8><!--จุดประสงค์หลักคือการบังคับความกว้างของเอกสารและความกว้างของอุปกรณ์ให้คงอยู่ที่ 1:1 โดยมีความกว้างสูงสุดที่ 1.0 และเพื่อห้ามการปรับขนาดหน้าจอ --><meta content=width=device-width, default-scale=1.0, maximum-scale=1.0, user-scalable=no name=viewport><!--นี่เป็นป้ายกำกับส่วนตัวของ iPhone เช่นกัน ซึ่งอนุญาตให้แสดงแบบเต็มหน้าจอ การเรียกดู --><meta content=yes name=apple-mobile-web-app-capable><!--ป้ายกำกับส่วนตัวของ iphone รูปแบบของแถบสถานะที่ด้านบนของ iphone --><meta content=black name=apple-mobile-web-app-status-bar-style><!--ปิดใช้งานการจดจำตัวเลขเป็นหมายเลขโทรศัพท์โดยอัตโนมัติ ซึ่งจะมีประโยชน์มากกว่า เนื่องจากจะแสดงสตริงตัวเลข เนื่องจากเป็นสีน้ำเงิน การเพิ่มสไตล์ให้กับสีอื่นๆ ก็ไม่มีประสิทธิภาพเช่นกัน --><meta content=telephone=no name=format-detection><!--ปิดใช้งานการรับรู้อีเมล--><meta content=email=no name=format-detection>
วิธีที่ดีที่สุดคือเพิ่มด้านซ้ายบนหรือ 0 0 เมื่อเขียนภาพพื้นหลัง ไม่เช่นนั้นจะข้ามได้ง่ายเมื่อเขียนเอฟเฟกต์การเคลื่อนไหว
ห้ามคัดลอกและเลือกข้อความ
.el { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: ไม่มี;มีจุดบกพร่องในการวางตำแหน่งคงที่ของโทรศัพท์มือถือ Apple ตรวจสอบว่ามีการตั้งค่า overflow-x:hidden ใน html และเนื้อหาหรือไม่
กำหนดสไตล์พิเศษสำหรับโทรศัพท์มือถือที่มีขนาดหน้าจอต่างกัน
@media only screen และ (min-device-width : 320px) และ (max-device-width : 375px){}การรองรับการป้อนข้อมูลด้วยแป้นพิมพ์ การกดแป้น และการกดปุ่มใน 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 จะถูกแทนที่โดยสไตล์เริ่มต้น
วิธีแก้ปัญหามีดังนี้:
อินพุต textarea { เส้นขอบ: 0 -webkit-appearance: ไม่มี;}เค้าโครงแบบยืดหยุ่นไม่รองรับแอตทริบิวต์ flex-wrap:wrap สำหรับ Android เวอร์ชันต่ำกว่า แต่ระบบ iOS รองรับแอตทริบิวต์การตัดบรรทัดอย่างไร แน่นอนว่าอย่าใช้ตัวแบ่งบรรทัดและใช้วิธีการอื่นแทน
.box{ display: -webkit-box; /* ไวยากรณ์เวอร์ชันเก่า: Safari, iOS, เบราว์เซอร์ Android, เบราว์เซอร์ WebKit รุ่นเก่า -ms-flexbox; /* ไวยากรณ์เวอร์ชันผสม: IE 10 */ จอแสดงผล: -webkit-flex; /* ไวยากรณ์เวอร์ชันใหม่: Chrome 21+ */ จอแสดงผล: flex; /* ไวยากรณ์เวอร์ชันใหม่: Opera 12.1, ไฟร์ฟอกซ์ 22+ */}คุณลักษณะตัวยึดตำแหน่งของอินพุตจะวางตำแหน่งข้อความขึ้น
line-height: (ความสูงเท่ากับกล่องอินพุต) --- โซลูชัน PC
line-height: ปกติ --- โซลูชันมือถือ
หลังจากอินพุต type=number ลูกศรขึ้นและลงจะปรากฏขึ้นที่ฝั่ง PC
อินพุต::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none !important;เปิดใช้งานโทรศัพท์มือถือ Android และ iOS เพื่อเปิดกล้องและเลือกฟังก์ชั่นอัลบั้มรูป
<input class=js_upFile cover1 type=file name=cover Accept=image/* capture=camera multiple/>$(function () { // รับ userAgent ของเบราว์เซอร์และแปลงเป็นตัวพิมพ์เล็ก var ua = navigator.userAgent.toLowerCase( ) ; //ตรวจสอบว่าเป็นโทรศัพท์ Apple หรือไม่ หากเป็นเช่นนั้น var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $(input:file).removeAttr(จับ); };})ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network