Để giải quyết các vấn đề tương thích đa trình duyệt phát sinh trên trình duyệt Safari trong quá trình phát triển web di động, bài viết đề xuất các giải pháp cho vấn đề tính toán chiều cao viewport và vấn đề giao diện người dùng bị lệch do bàn phím ảo.
Vấn đề chiều cao viewport có thể được giải quyết bằng cách sử dụng dvh hoặc svh, vấn đề bàn phím ảo có thể được giải quyết bằng cách sử dụng min-height, áp dụng tiền tố nhà cung cấp và điều khiển động bằng JavaScript.
Khi phát triển web di động trên Safari, cần phải xem xét việc sử dụng tiền tố nhà cung cấp, giới hạn dung lượng LocalStorage, SessionStorage (khoảng 5MB) và việc không thể chia sẻ Storage giữa các tab.
Tôi đã viết bài rất chăm chỉ và nhấn nút lưu, nhưng lại nhận được lỗi 404 và bài viết đã biến mất ㅠㅠ
Trong quá trình phát triển web di động, tôi đã gặp phải hai vấn đề khó chịu về khả năng tương thích đa trình duyệt và một số vấn đề khác cần xem xét.
Tôi muốn ghi lại những vấn đề đó.
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 do trình duyệt tự tạo. Trừ khi có thiết lập show/hide đặc biệt, nếu cuộn xuống thì nó sẽ xuất hiện và nếu cuộn lên thì nó sẽ biến mất.
Vấn đề là viewport không cố định mà thay đổi do những thanh này.
Ví dụ, nếu đặt chiều cao là 100vh, khi không có thanh điều hướng thì bố cục sẽ được hiển thị chính xác, nhưng khi thanh điều hướng xuất hiện, nó sẽ che khuất giao diện người dùng.
Để 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ý sự thay đổi bố cục giao diện người dùng do sự hiện diện của thanh địa chỉ hoặc thanh điều hướng phía dưới.
2. Cũng có thể xem xét svh.
Svh là chiều cao của vùng giao diện người dùng 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ự đoán thanh địa chỉ hoặc thanh điều hướng sẽ xuất hiện, sử dụng svh sẽ chính xác hơn.
Vấn đề giao diện người dùng bị đẩy do bàn phím ảo khi chọn input
Trên Safari di động, khi chọn input, giao diện người dùng 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 ở chế độ absolute, nhưng trên Safari di động, nó chiếm không gian như thể thuộc tính display block được áp dụng.
Safari điều chỉnh chiều cao viewport một cách động khi bàn phím ảo xuất hiện, dẫn đến các yếu tố sử dụng đơn vị vh được điều chỉnh lại, gây ra vấn đề. Để giải quyết vấn đề này,
1. Sử dụng min-height.
Cố định chiều cao để giao diện người dùng không bị đẩy.
html, body{height:100%;min-height:100vh;/* Thiết lập chiều cao tối thiểu cố định */overflow: hidden;}
2. Áp dụng tiền tố nhà cung cấp. (sẽ được giải thích sau)
Chèn thuộc tính được áp dụng trên các trình duyệt cụ thể như Safari.
3. Điều khiển viewport một cách động bằng Javascript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Mã sẽ được thực thi khi bàn phím xuất hiệndocument.body.classList.add('keyboard-visible');}else{// Mã sẽ được thực thi khi bàn phím biến mấtdocument.body.classList.remove('keyboard-visible');}});
Thêm sự kiện resize để phát hiện khi viewport thay đổi và áp dụng kiểu thích 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ụ bên dưới, class được áp dụng)
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Bàn phím ảo đang xuất hiệndocument.body.classList.add('keyboard-visible');}else{// Bàn phím ảo đã biến mấtdocument.body.classList.remove('keyboard-visible');}});
Trong trường hợp của tôi, tôi đã giải quyết bằng cách sử dụng phương pháp 3-1. Nếu phương pháp 3-1 không hoạt động như mong muốn, hãy kiểm tra xem liệu nó có đúng như dự định hay không bằng cách sử dụng mã bên dưới trước.
Tôi đã tìm thấy một số điều 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à một 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ể, cho phép áp dụng css được triển khai khác nhau giữa các trình duyệt theo ý định. Điều này đảm bảo tính nhất quán giữa các trình duyệt cùng loại và khả năng tương thích với các trình duyệt cũ hơn.
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.
.container{display: -webkit-flex;/* Safari */display: flex;-webkit-flex-direction: row;flex-direction: row;}.item{-webkit-flex-grow:1;/* Safari */flex-grow:1;-webkit-flex-shrink:1;/* Safari */flex-shrink:1;}.grid-container{display: -ms-grid;/* IE11 và các trình duyệt cũ hơn */display: grid;/* Trình duyệt mới nhất */}.sticky-element{position: -webkit-sticky;/* Safari */position: sticky;}input[type="text"],select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}
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 ý.
ps. Tôi rất buồn vì bài viết mà tôi đã viết đã bị mất. Bài viết mà tôi đã đăng không phải là bài viết chất lượng cao,,,ㅠ Tôi phải lưu tạm thời.