Screen size issue with ionic on iPhone X - ios

I'm trying to export my app in ionic 3. But when I launch in the iPhone X emulator, the screen have 2 empty espaces in the top and bottom (screen problem?).
Anyone help to adapt the resolution to iPhone X resolution?

In order to remove that empty spaces you can add viewport-fit=coverto your meta tag:
<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

Had the same issue with the Titanium SDK. The issue is that you need to provide the correct launch-screens that adapt the new screen-sizes: -
Portrait: 1125x2436
Landscape: 2436x1125
For Titanium, it was just solved by adjusting the build-script to detect and package the launch-screens, so probably the Ionic team will do something similar soon!
For native Xcode, the issue can be the same and is resolved by placing the correct images into the Asset-Catalog:

Add proper launch images for iphone x Launch image adding help link
Then follow these
For a manual fix to an existing cordova project
UI interface issue
Add this to your info.plist file. Fixing the launch image is a separate issue
<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>
Set viewport-fit=cover in the meta tag
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
More help

First, add viewport-fit=cover into index.html meta tag
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
then, The statusbar plugin PR has been merged in. Please install the latest stable version of the cordova statusbar.
ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
Next, add this CSS in your src/app/app.scss:
<style>
.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
height: calc(44px + constant(safe-area-inset-top));
}
.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: constant(safe-area-inset-top);
}
div.tab-nav.tabs {
height: calc(49px + constant(safe-area-inset-bottom));
}
ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs {
top: calc(64px + constant(safe-area-inset-top));
}
</style>
last one,
add a 1125 × 2436 size splash screen for iphone X ,give path of it in config.xml
<splash src="resources/ios/splash/Default#3x~iphone.png" width="1125" height="2436"/>

Cordova plugin statusbar is updated to work for iPhoneX in 2.3.0 Please check the release notes

First, add viewport-fit=cover into index.html meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
Second add Status bar plugin
cordova plugin add cordova-plugin-statusbar
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

Related

iPhone X : : Error : safe-area-inset property is not supported for this property?

For aligning html page on an iPhoneX, apple had provided the constants like constant(safe-area-inset-left),etc.
This was working fine, last I checked in iOS 11.0.x. After updating to iOS 11.2, it has stopped working. I'm getting this error/warning in css "The value constant(safe-area-inset-left) is not supported by this property."
padding-left: constant(safe-area-inset-left) !important;
Viewport is also not working.
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
In iOS 11.2 constant(safe-area-inset-dir) is replaced by env(safe-area-inset-dir)

build.phonegap app. Cant scroll with finger on iPhone (requires 2 fingers)

I have built an app using build.phonegap.com (phonegap version 3.6.3). While testing the app on devices I am unable to scroll vertically on my iphone with a single finger, it requires 2 fingers to scroll. However on ipad I am able to scroll on 1.
This is my viewport meta tag
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Answered: It was because I had height: 100%; on the div I wanted to scroll!

Phonegap 3 white flash after splash

I know this has been asked (and answered) several times (Phonegap showing white screen after the splash screen - IOS, Phonegap 2.0 - on app launch a white screen flashes prior to my app loading, how to to kill the white flickering splashscreen at the start of phonegap iOS app?) but none of these solutions seem to be working for me. Maybe because I'm using Phonegap version 3?
I'm only loading Phonegap and jQuery 2.0.0 (other solutions deal with jQuery-mobile which I'm not using) and I'm only targeting iOS for deployment. I've got a splash image loading, then the app displays a white screen (duration varies - I'm guessing it's loading up the app perhaps?) then my index.html loads up my first screen. Here's my current head:
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<title>My App</title>
<script type="text/javascript" src="phonegap.js"></script>
<script src="js/lib/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</head>
I tried adding this to my config.xml (at the same folder level as index.html):
<preference name="backgroundColor" value="0x000000" />
but I still get the white screen flash. I also tried manually hiding/showing the splash with:
function onDeviceReady() {
navigator.splashscreen.show();
}
but that didn't seem to have any effect at all. Anybody have any suggestions?
I was finally able to eliminate the splash flash, but I had to use Cordova to do it. Here are the steps I took:
In Terminal:
cordova create ~/path/to/project “com.appname.app” “appName”
cd ~/path/to/project
cordova platform add ios
cordova build
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
cordova build
Use Finder to navigate to ~/path/to/project/platforms/ios/ and double-click projectname.xcodeproj to open the project in Xcode.
Next, I went in and edited the images. You could do it any number of ways. Here's what I did: In Xcode, navigate to Resources/splash/, right-click the image to change, select Show in Finder and use whatever tools you want to change the images.
Once finished, head back to Xcode and open the root-level config.xml (Still not sure why there are two config.xml files, but you want the one furthest out in the folder structure). Update the AutoHideSplashScreen property to
<preference name="AutoHideSplashScreen" value="false" />.
From the Xcode main menu, select Product > Clean and then Product > Build.
Worked for me repeatedly. I was able to then use the navigator.splashscreen.show() and navigator.splashscreen.hide() methods from my app (which didn't seem to be responding without going through all these steps).
Hope this helps!
I have a problem with the plugins or some problem with phonegap so
function onDeviceReady() {
navigator.splashscreen.show();
}
doesn't work for me.
I fixed it by setting the webview alpha to 0 until it's loaded:
3 steps:
in the file "CDVViewController.m" in method "-(void)createGapView" I added:
self.webView.alpha=0;
in the file "MainViewController.m" in method "-(void)WebViewDidFinishLoad:(UIWebView*)theWebView" I added: theVebView.alpha=1;
in the file "MainController.xib" I changed the background to black (set it to any color you prefer).
Now instead of a white screen flash I have a black one until the content is fully loaded.
good enough for me. (although not perfect)
hope this helps..
try Add
<param name="onload" value="true" /> to your SplashScreen feature in config.xml.
This worked for me using build.phonegap.com
Step 1: Added the Slashscreen plugin to your config.xml
<gap:plugin name="org.apache.cordova.splashscreen" version="0.2.7" />
Step 2: Update your config.xml with this preference.
<preference name="auto-hide-splash-screen" value="false" />
Step 3: Added the plugin function call to your 'deviceready' event
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.hide()
}
</script>
After getting mad with the splash plugin, I find out this solution:
in MainViewController.xib, add a UIImageView (imgView).
put your splash image in it, set scale to fill.
In MainViewController.m, override - (void)webViewDidFinishLoad:(UIWebView*)theWebView
add these code after [super webViewDidFinishLoad:theWebView];
[self.view sendSubviewToBack:imgView];
imgView.hidden = YES;

phonegap 2.2 orientation change does not resize app

I didn't have this problem on previous versions of Phonegap. But in 2.2, when I change the orientation, it doesn't update the uiwebview.
Does phonegap not support landscape view by default? How do you handle this?
This is not an issue with the WebView getting updated but with the meta tag in the index.html's document head.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
After removing the unnecessary height=device-height everything works just fine
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
To add to Stephan's answer, if you need to do anything special when the orientation changes, you can set a callback function to:
window.onorientationchange
I have also have same issue in ios phonegap ....
Just go and update x-code project file (IOS Application target ) change or update support interface orientation and check it all orientation .
it's work well ...
window.addEventListener(
"orientationchange",
function() {
// Announce the new orientation number
location.reload();
}, false );

Preventing Zoom in Phonegap + JQuery Mobile

I'm building a PhoneGap + JQuery Mobile app, but I can't seem to prevent it from zooming in with a double click. I followed the tips listed at http://www.tricedesigns.com/2012/01/17/mobile-web-phonegap-html-dev-tips/, specifically by adding:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Does anyone know of a solution for zooming?
Try:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
This is what I use and I don't get any zooming behavior.
Here is the Apple documentation for the viewport meta tag: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Place "user-scalable=no" in to your meta tag
like this
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
This is the best way to stop zoom in mobile, Its work for me in phonegap
The accepted solution does not seem to work in iOS10, this does:
// stop ios bounce and zoom
document.ontouchmove = event => {
event.preventDefault();
};
This will stop move events reaching the root element/browser

Resources