Những vấn đề về cross-browsing mà tôi đã gặp phải (chủ yếu là Safari)

Bài viết này ghi lại hai vấn đề về cross-browsing khó chịu mà tôi đã gặp phải khi phát triển web di động, cũng như các vấn đề khác cần xem xét.

Tôi muốn ghi lại điều đó.

Vấn đề tính toán chiều cao viewport do thanh địa chỉ và thanh điều hướng của trình duyệt gây ra

Safari và Samsung Internet có thanh điều hướng ở cuối tích hợp sẵn trong trình duyệt. Trừ khi bạn đặc biệt thiết lập show/hide, nếu bạn cuộn xuống, nó sẽ xuất hiện và biến mất khi bạn cuộn lên.

Vấn đề là viewport không cố định và thay đổi do chúng.

Ví dụ: nếu bạn đặt chiều cao là 100vh, bố cục sẽ được hiển thị chính xác khi không có thanh điều hướng, nhưng khi thanh điều hướng xuất hiện, nó sẽ che khuất UI.

Để giải quyết vấn đề này

1. Sử dụng dvh.

Dvh là viewport động, tự động phản ánh sự thay đổi mỗi khi chiều cao viewport thay đổi. Do đó, có thể xử lý việc thay đổi bố cục UI tùy thuộc vào việc có thanh địa chỉ hoặc thanh điều hướng ở cuối hay không.

2. Cũng có thể xem xét svh.

Svh là chiều cao của vùng UI thuần túy, không bao gồm thanh địa chỉ hoặc thanh điều hướng. Trong trường hợp dự kiến thanh địa chỉ hoặc thanh điều hướng sẽ xuất hiện, việc sử dụng svh sẽ chính xác hơn.

Vấn đề UI bị đẩy do bàn phím ảo khi chọn (focus) vào input

Trên Safari di động, khi tôi chọn input, UI hiện có bị đẩy do bàn phím ảo. Trên các trình duyệt khác, bàn phím ảo thường xuất hiện ở dạng absolute, nhưng trên web di động Safari, nó chiếm chỗ như thể đã áp dụng display block.

Safari điều chỉnh động chiều cao của viewport khi bàn phím ảo xuất hiện, dẫn đến vấn đề các phần tử sử dụng đơn vị vh được điều chỉnh lại. Để giải quyết điều này,

1. Sử dụng min-height.

Cố định chiều cao để UI không bị đẩy.

2. Áp dụng tiền tố nhà cung cấp. (sẽ được giải thích sau)

Chèn thuộc tính áp dụng cho các trình duyệt cụ thể như Safari.

3. Điều khiển viewport động bằng JavaScript.

* Không khuyến khích phương pháp này. Bố cục sẽ bị nhấp nháy khi chiều cao cuộn thay đổi đột ngột.

Áp dụng sự kiện resize để phát hiện khi viewport thay đổi và áp dụng kiểu dáng phù hợp.

3-1. Điều khiển vị trí khi sự kiện focusin xảy ra.

3-2. Điều khiển vị trí khi bàn phím ảo xuất hiện. (Trong ví dụ dưới đây, class được áp dụng)

Cách tốt nhất là giải quyết hoàn toàn bằng CSS, nhưng nếu các ví dụ trên không giải quyết được, hãy kiểm tra xem đó có phải là phần tử position: absolute hoặc fixed không, và thử xóa các thuộc tính top, right, left, bottom rồi sửa CSS.

Khác

Tôi đã tìm thấy một số điểm cần xem xét khi phát triển web di động trên Safari.

1. Sử dụng tiền tố nhà cung cấp khi sử dụng một số thuộc tính.

* Tiền tố nhà cung cấp là tiền tố cho phép trình duyệt hiểu và hiển thị một thuộc tính CSS cụ thể, giúp các CSS được triển khai khác nhau giữa các trình duyệt được áp dụng như ý muốn. Điều này đảm bảo tính nhất quán giữa các trình duyệt và khả năng tương thích với các trình duyệt cũ.

Loại

-webkit-: Chrome, Safari, v.v.
-moz-: Mozilla Firefox
-ms-: Internet Explorer và Edge
-o-: Opera

Các thuộc tính tiêu biểu cần tiền tố nhà cung cấp như sau.

Ngoài ra, Safari giới hạn dung lượng LocalStorage và SessionStorage khoảng 5MB và không chia sẻ dung lượng lưu trữ giữa các tab, vì vậy cần lưu ý.