[
https://issues.apache.org/jira/browse/CB-13273?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16167523#comment-16167523
]
Sergey Smirnov commented on CB-13273:
-------------------------------------
Got it to work:
1. First of all add new image(s) for iPhone X into Images.xcassets /
LaunchImage, here is the snippet for Content.json of portrait one:
{noformat}
{
"orientation" : "portrait",
"idiom" : "iphone",
"extent" : "full-screen",
"minimum-system-version" : "11.0",
"filename" : "DUNNO_HOW_TO_NAME_IT.png",
"subtype" : "2436h",
"scale" : "3x"
},
{noformat}
Image size should be 1125x2436 (375x812 at 3x)
2. Add new Safe area feature to the CDVLaunchScreen.storyboard. Apple tells
that it is safe, as on previous iOS versions it will fall back to defaults.
2.1 Check "Use Safe Area Laout Guide" at Interface Builder Document;
2.2 Edit constraints: LaunchStoryboard's bottom, leading and trailing to Safe
Area ones, top should be set to Superview.top (by default) or to Safe Area.top.
After that you will something close to Fig1 - use of almost all area, but with
status bar safe area.
!fig1.png|thumbnail!
If you want to move forward and use the whole screen area:
3. Add viewport-fit=cover to your viewport meta tag.
4. Use cordova-plugin-statusbar with a little bit of patching - it has a
hardcoded statubar height. The new one for X is 44. So you can use something
close to the following at resizeWebView method:
{noformat}
CGFloat defaultStatusbarHeight = 20;
if (IsAtLeastiOSVersion(@"11.0") && height == 44) {
defaultStatusbarHeight = 44;
}
if (!self.statusBarOverlaysWebView) { ...
{noformat}
and replace all "20"-s with "defaultStatusbarHeight".
Also it seems that "statusbar overlay webview" case now requires the increment
of height for webview:
{noformat}
if (IsAtLeastiOSVersion(@"11.0") && height == 44) {
frame.size.height += defaultStatusbarHeight;
}
{noformat}
After that you will something close to Fig2.
!fig2.png|thumbnail!
PS: cordova-plugin-splashscreen requires some patching too - atm it references
to wrong image. Make some patches to support X, but the plugin cannot find an
image. Please, point me to the right image referencing...
PPS: tested for WKWebView (cordova-plugin-wkwebview-engine) only.
> Webview is sized incorrectly on iPhone X (Simulator)
> ----------------------------------------------------
>
> Key: CB-13273
> URL: https://issues.apache.org/jira/browse/CB-13273
> Project: Apache Cordova
> Issue Type: Bug
> Components: cordova-ios
> Affects Versions: cordova-ios 4.5.0
> Environment: Xcode 9.0 (9A235)
> Simulator 10.0 (SimulatorApp-829.6) - iPhone X
> Reporter: Dave Alden
> Assignee: Shazron Abdullah
> Labels: iPhoneX, ios11
> Attachments: fig1.png, fig1.png, fig2.png, fig2.png, Simulator Screen
> Shot - iPhone X - 2017-09-14 at 15.52.54.png, webview-test.zip
>
>
> New app with cordova-ios@4.5.0 (using default UIWebView) running on iPhone X
> Simulator does not size correctly, leaving black areas above and below the
> app content and white bars between the black areas and app content.
> Adding cordova-plugin-wkwebview-engine so Cordova uses WKWebView, white bars
> go away, but the black areas remain:
> !https://cdn.pbrd.co/images/GKeaEPg.png|height=640!
> !https://cdn.pbrd.co/images/GKeaWwK.png|height=640!
> Setting
> {code:html}viewport-fit=cover{code}
> fixes the white bar issue with UIWebView, as outlined here
> [http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/],
> but the black areas remain:
> [^Simulator Screen Shot - iPhone X - 2017-09-14 at 15.52.54.png]
> Attached Cordova project illustrates the issue.
--
This message was sent by Atlassian JIRA
(v6.4.14#64029)
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscr...@cordova.apache.org
For additional commands, e-mail: issues-h...@cordova.apache.org
