Tôi đã tìm thấy giải pháp cho các thanh màu trắng ở đây :
Đặt viewport-fit=covertrên <meta>thẻ khung nhìn , tức là:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
Các thanh màu trắng trong UIWebView sau đó biến mất:
Các giải pháp để loại bỏ những vùng màu đen (cung cấp bởi @dpogue trong một chú thích dưới đây) là sử dụng hình ảnh LaunchStoryboard với cordova-plugin-splashscreenđể thay thế những hình ảnh di sản khởi động, được sử dụng bởi Cordova theo mặc định. Để làm như vậy, hãy thêm phần sau vào nền tảng iOS trong config.xml:
<platform name="ios">
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
<!-- more iOS config... -->
</platform>
Sau đó, tạo hình ảnh với các kích thước sau trong res/screen/ios(loại bỏ bất kỳ kích thước hiện có nào):
Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732
Sau khi các thanh màu đen bị loại bỏ, có một điều khác về iPhone X cần giải quyết: Thanh trạng thái lớn hơn 20px do "notch", có nghĩa là bất kỳ nội dung nào ở phía trên cùng của ứng dụng Cordova của bạn sẽ bị che khuất bởi nó :
Thay vì viết khó một khoảng đệm bằng pixel, bạn có thể xử lý điều này tự động trong CSS bằng các safe-area-inset-*hằng số mới trong iOS 11.
Lưu ý: trong iOS 11.0, hàm để xử lý các hằng số này đã được gọi constant()nhưng trong iOS 11.2 Apple đã đổi tên nó thành env()( xem tại đây ), do đó, để giải quyết cả hai trường hợp, bạn cần quá tải quy tắc CSS với cả hai và dựa vào cơ chế dự phòng CSS để áp dụng thích hợp một:
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
Kết quả sau đó như mong muốn: nội dung ứng dụng bao phủ toàn màn hình, nhưng không bị che khuất bởi "notch":
Tôi đã tạo một dự án thử nghiệm Cordova minh họa các bước trên: webview-test.zip
Ghi chú:
Các nút chân trang
- Nếu ứng dụng của bạn có các nút chân trang (như của tôi), bạn cũng sẽ cần áp dụng
safe-area-inset-bottomđể tránh chúng bị chồng lên bởi nút Home ảo trên iPhone X.
- Trong trường hợp của tôi, tôi không thể áp dụng điều này
<body>vì chân trang đã được định vị tuyệt đối, vì vậy tôi cần áp dụng nó trực tiếp cho chân trang:
.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
wireova-plugin-statusbar
- Kích thước thanh trạng thái đã thay đổi trên iPhone X, do đó, các phiên bản cũ hơn
cordova-plugin-statusbarhiển thị không chính xác trên iPhone X
- Mike Hartington đã tạo yêu cầu kéo này áp dụng các thay đổi cần thiết.
- Phiên bản này đã được hợp nhất vào
cordova-plugin-statusbar@2.3.0bản phát hành, vì vậy hãy đảm bảo rằng bạn đang sử dụng ít nhất phiên bản này để áp dụng cho các nội dung trong vùng an toàn
màn hình giật gân
- Các ràng buộc của bảng phân cảnh LaunchScreen đã thay đổi trên iOS 11 / iPhone X, có nghĩa là màn hình giật gân dường như "nhảy" khi khởi chạy khi sử dụng các phiên bản hiện có của plugin ( xem tại đây ).
- Điều này đã được ghi lại trong báo cáo lỗi CB-13505 , đã sửa lỗi PR cordova-ios # 354 và được phát hành
cordova-ios@4.5.4, vì vậy hãy đảm bảo rằng bạn đang sử dụng phiên bản gần đây của cordova-iosnền tảng.
hướng thiết bị
- Khi sử dụng UIWebView trên iOS 11.0, việc xoay từ dọc> ngang> dọc khiến
safe-area-insetkhông áp dụng lại được, khiến nội dung bị che khuất bởi rãnh một lần nữa (như được đánh dấu bằng jms trong nhận xét bên dưới).
- Cũng xảy ra nếu ứng dụng được khởi chạy theo chiều ngang sau đó được xoay sang chiều dọc
- Điều này không xảy ra khi sử dụng WKWebView qua
cordova-plugin-wkwebview-engine.
- Báo cáo radar: http://www.openradar.me/radar?id=5035192880201728
- Cập nhật : điều này dường như đã được sửa trong iOS 11.1
Để tham khảo, đây là số báo Cordova ban đầu mà tôi đã mở, ghi lại điều này: https://issues.apache.org/jira/browse/CB-13273
