Các nút phù hợp với cuối trang xung đột với thanh menu của Safari trên điện thoại di động

Question

Tôi đang xây dựng một cổng web có chức năng và khá đẹp trên nhiều nền tảng.
Một trong những nền tảng là IOS Safari và điều này là do tôi gặp sự cố.
Trong mã của tôi, tôi căn chỉnh hai nút nổi ở dưới cùng của div với chiều rộng và chiều cao 100%
Tất cả đều hoạt động tốt và các nút của tôi hiển thị chính xác như chúng được cho là ở cuối trang.
Tuy nhiên khi tôi nhấp vào các nút, chế độ xem nhỏ gọn từ thiết bị di động chuyển sang chế độ xem toàn cảnh và các nút của tôi bị ẩn sau thanh điều hướng phía dưới!

Hành vi bình thường cho safari di động có hiển thị menu được mở rộng khi người dùng chạm vào 10% dưới cùng của màn hình không?
Làm cách nào để tránh điều này?

Trong gif này, bạn có thể thấy sự cố trên trình mô phỏng IOS:

Như bạn có thể thấy sự cố chỉ xảy ra khi nút ở mức thấp hơn 10% của chế độ xem. Đây chỉ là một nút bình thường, Mã của tôi đã được ba nhà phát triển kiểm tra ba lần và nó không có lỗi.

Answer 1

Tôi nghĩ rằng tôi có thể đã tìm thấy câu trả lời. Thiết nội dung của bạn có phong cách sau:

• height: 100% (cho phép nội dung để điền vào khung nhìn và đi xa hơn phía dưới)
• overflow-y: scroll (cho phép bạn di chuyển bên dưới cửa sổ xem; giá trị mặc định là visible)
• -webkit-overflow-scrolling: touch (để làm mịn mọi hành vi cuộn)

dường như buộc trình đơn iOS trong Safari luôn xuất hiện. Bằng cách đó, các lần nhấp nút sẽ thực sự hoạt động thay vì mở trình đơn Safari. Hi vọng điêu nay co ich!

Answer 2

Nó chỉ ra đây là hành vi tiêu chuẩn trong safari di động và như vậy không thể được ghi đè, có lẽ trong một bản cập nhật IOS trong tương lai chức năng này sẽ thay đổi.

Answer 3

Tôi biết câu hỏi này là một chút cũ, nhưng kể từ khi vấn đề vẫn còn tồn tại tôi nghĩ rằng tôi nên chia sẻ kinh nghiệm của tôi ...

Tính đến bây giờ có NO sửa chữa cho vấn đề này, nhưng có một cách giải quyết khác. Các giải pháp jennz0r cung cấp có thể làm việc cho một số, nhưng tôi không thích ý tưởng của thanh trình đơn luôn hiển thị. Tôi thấy một trang web đã giải quyết được vấn đề ... nó dường như hoạt động ít nhất. Tôi không tìm thấy bất cứ điều gì trong css hoặc js của họ.

Vì vậy, sửa lỗi là gì? Vì "vùng chết" là chiều cao 44px, chúng đơn giản làm cho thanh nổi của chúng cao 88px: D Người dùng sẽ theo bản năng chạm vào đầu/trung tâm của nút và hầu như lúc nào cũng hoạt động!

"Nếu nó ngu ngốc, nhưng nó hoạt động ... nó không ngu ngốc ...";)