ปัญหา Cross-Browsing ที่ฉันเจอ (ส่วนใหญ่เป็น Safari)

เกี่ยวกับปัญหาสองประการที่น่าปวดหัวเกี่ยวกับการทำงานข้ามเบราว์เซอร์ที่พบระหว่างการพัฒนาเว็บมือถือและปัญหาอื่นๆ ที่ควรพิจารณา

ฉันต้องการบันทึกไว้

ปัญหาการคำนวณความสูงของ viewport เนื่องจากแถบที่อยู่และแถบนำทางของเบราว์เซอร์เอง

Safari และ Samsung Internet มีแถบนำทางด้านล่างในเบราว์เซอร์เอง โดยปกติแล้ว หากไม่ได้ตั้งค่า show/hide โดยเฉพาะ แถบนำทางจะปรากฏขึ้นเมื่อเลื่อนลงและหายไปเมื่อเลื่อนขึ้น

ปัญหาคือ viewport ไม่คงที่และเปลี่ยนแปลงเนื่องจากสิ่งเหล่านี้

ตัวอย่างเช่น หากตั้งค่าความสูงเป็น 100vh レイアウトจะถูกวาดอย่างถูกต้องเมื่อไม่มีแถบนำทาง แต่ถ้าแถบนำทางปรากฏขึ้น แถบนำทางจะบัง UI

เพื่อแก้ไขปัญหานี้

1. ใช้ dvh

dvh คือ viewport แบบไดนามิก ซึ่งจะสะท้อนการเปลี่ยนแปลงโดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงความสูงของ viewport ดังนั้นจึงสามารถรับมือกับการเปลี่ยนแปลงเค้าโครง UI ตามที่มีหรือไม่มีแถบที่อยู่หรือแถบนำทางด้านล่าง

2. สามารถพิจารณา svh ได้เช่นกัน

svh คือความสูงของพื้นที่ UI อย่างแท้จริงโดยไม่รวมแถบที่อยู่หรือแถบนำทาง ในสถานการณ์ที่คาดว่าแถบที่อยู่หรือแถบนำทางจะปรากฏขึ้น การใช้ svh จะมีความแม่นยำมากขึ้น

ปัญหา UI เลื่อนเนื่องจากแป้นพิมพ์เสมือนเมื่อเลือก (โฟกัส) input

ใน Safari บนมือถือ เมื่อเลือก input ปัญหา UI เลื่อนเนื่องจากแป้นพิมพ์เสมือนเกิดขึ้น โดยทั่วไปแล้วในเบราว์เซอร์อื่นๆ แป้นพิมพ์เสมือนจะปรากฏขึ้นแบบ absolute แต่ใน Safari เว็บมือถือ ดูเหมือนว่าจะใช้ display block และใช้พื้นที่

Safari ปรับความสูงของ viewport แบบไดนามิกเมื่อแป้นพิมพ์เสมือนปรากฏขึ้น ทำให้เกิดปัญหากับองค์ประกอบที่ใช้หน่วย vh ในการแก้ปัญหานี้

1. ใช้ min-height

ตั้งค่าความสูงคงที่เพื่อป้องกันไม่ให้ UI เลื่อน

2. ใช้ vendor prefix (กล่าวถึงด้านล่าง)

แทรกแอตทริบิวต์ที่ใช้ในเบราว์เซอร์เฉพาะ เช่น Safari

3. ควบคุม viewport แบบไดนามิกด้วย JavaScript

* วิธีนี้ไม่แนะนำ เนื่องจากความสูงของการเลื่อนจะเคลื่อนที่อย่างรวดเร็วและเค้าโครงจะกะพริบ

ตั้งค่า event listener สำหรับ resize เพื่อตรวจจับการเปลี่ยนแปลงของ viewport และใช้สไตล์ที่เหมาะสม

3-1. ควบคุมตำแหน่งเมื่อเกิดเหตุการณ์ focusin

3-2. ควบคุมตำแหน่งเมื่อแป้นพิมพ์เสมือนปรากฏขึ้น (ในตัวอย่างด้านล่างใช้ class)

การแก้ปัญหาด้วย CSS อย่างสมบูรณ์เป็นวิธีที่ดีที่สุด แต่ถ้าไม่สามารถแก้ไขได้ด้วยตัวอย่างข้างต้น ให้ตรวจสอบว่าเป็นองค์ประกอบ position: absolute หรือ fixed หรือไม่ และลองลบแอตทริบิวต์ top, right, left, bottom แล้วแก้ไข CSS

อื่นๆ

นอกจากนี้ ฉันยังค้นหาสิ่งต่างๆ ที่ควรพิจารณาเมื่อพัฒนาเว็บมือถือใน Safari

1. ใช้ vendor prefix เมื่อใช้แอตทริบิวต์บางอย่าง

* vendor prefix คือคำนำหน้าที่ช่วยให้เบราว์เซอร์สามารถเข้าใจและแสดงผลแอตทริบิวต์ CSS เฉพาะได้ ทำให้ CSS ที่ใช้แตกต่างกันในแต่ละเบราว์เซอร์ทำงานได้ตามที่ตั้งใจไว้ โดยการนี้จะช่วยให้เกิดความสอดคล้องกันระหว่างเบราว์เซอร์และสามารถเข้ากันได้กับเบราว์เซอร์เวอร์ชันเก่า

ประเภท

-webkit-: Chrome, Safari ฯลฯ
-moz-: Mozilla Firefox
-ms-: Internet Explorer และ Edge
-o-: Opera

แอตทริบิวต์ทั่วไปที่ต้องการ vendor prefix มีดังนี้

นอกจากนี้ Safari ยังจำกัดขนาดของ LocalStorage และ SessionStorage ไว้ที่ประมาณ 5 MB และไม่แชร์พื้นที่เก็บข้อมูลระหว่างแท็บ ดังนั้นจึงจำเป็นต้องระมัดระวัง