Issue
I tested my Cordova-based app on the iPhone 11 Pro Max simulator. everything look good as a design. But I realized that I cannot click on the elements I want to click. I have to click about 20 pixels above what I want to click. This is for every element on page.
For example, I have to click on the yellow circle to open the tab shown with the red circle in the screenshot below.
My index.html
<meta name"viewport" content"user-scalableno, initial-scale1, maximum-scale1, minimum-scale1, widthdevice-width">
**If I add viewport-fitcover, clicks are ok, but this time there is a large (really big) area below tabbar. exactly like this:Problem screen ionic app on iPhone 11 Pro Max
config.xml
<?xml version'1.0' encoding'utf-8'?>
<widget id“xx” version"0.0.7" xmlns"http://www.w3.org/ns/widgets" xmlns:android"http://schemas.android.com/apk/res/android" xmlns:cdv"http://cordova.apache.org/ns/1.0">
<content src"index.html" />
<access origin"*" />
<allow-navigation href"*" />
<allow-intent href"http://*/*" />
<allow-intent href"https://*/*" />
<allow-intent href"tel:*" />
<allow-intent href"sms:*" />
<allow-intent href"mailto:*" />
<allow-intent href"geo:*" />
<preference name"ScrollEnabled" value"false" />
<preference name"BackupWebStorage" value"none" />
<preference name"SplashMaintainAspectRatio" value"true" />
<preference name"FadeSplashScreenDuration" value"300" />
<preference name"SplashShowOnlyFirstTime" value"false" />
<preference name"SplashScreen" value"screen" />
<preference name"SplashScreenDelay" value"3000" />
<preference name"orientation" value"portrait" />
<preference name"android-targetSdkVersion" value"29" />
<preference name"scheme" value"app" />
<preference name"hostname" value"localhost" />
<preference name"WKWebViewOnly" value"true" />
<platform name"ios">
<allow-intent href"itms:*" />
<allow-intent href"itms-apps:*" />
<icon height"57" src"resources/ios/icon/icon.png" width"57" />
<icon height"114" src"resources/ios/icon/icon@2x.png" width"114" />
<icon height"29" src"resources/ios/icon/icon-small.png" width"29" />
<icon height"58" src"resources/ios/icon/icon-small@2x.png" width"58" />
<icon height"87" src"resources/ios/icon/icon-small@3x.png" width"87" />
<icon height"20" src"resources/ios/icon/icon-20.png" width"20" />
<icon height"40" src"resources/ios/icon/icon-20@2x.png" width"40" />
<icon height"60" src"resources/ios/icon/icon-20@3x.png" width"60" />
<icon height"48" src"resources/ios/icon/icon-24@2x.png" width"48" />
<icon height"55" src"resources/ios/icon/icon-27.5@2x.png" width"55" />
<icon height"29" src"resources/ios/icon/icon-29.png" width"29" />
<icon height"58" src"resources/ios/icon/icon-29@2x.png" width"58" />
<icon height"87" src"resources/ios/icon/icon-29@3x.png" width"87" />
<icon height"40" src"resources/ios/icon/icon-40.png" width"40" />
<icon height"80" src"resources/ios/icon/icon-40@2x.png" width"80" />
<icon height"120" src"resources/ios/icon/icon-40@3x.png" width"120" />
<icon height"88" src"resources/ios/icon/icon-44@2x.png" width"88" />
<icon height"50" src"resources/ios/icon/icon-50.png" width"50" />
<icon height"100" src"resources/ios/icon/icon-50@2x.png" width"100" />
<icon height"60" src"resources/ios/icon/icon-60.png" width"60" />
<icon height"120" src"resources/ios/icon/icon-60@2x.png" width"120" />
<icon height"180" src"resources/ios/icon/icon-60@3x.png" width"180" />
<icon height"72" src"resources/ios/icon/icon-72.png" width"72" />
<icon height"144" src"resources/ios/icon/icon-72@2x.png" width"144" />
<icon height"76" src"resources/ios/icon/icon-76.png" width"76" />
<icon height"152" src"resources/ios/icon/icon-76@2x.png" width"152" />
<icon height"167" src"resources/ios/icon/icon-83.5@2x.png" width"167" />
<icon height"172" src"resources/ios/icon/icon-86@2x.png" width"172" />
<icon height"196" src"resources/ios/icon/icon-98@2x.png" width"196" />
<icon height"1024" src"resources/ios/icon/icon-1024.png" width"1024" />
<splash height"480" src"resources/ios/splash/Default~iphone.png" width"320" />
<splash height"960" src"resources/ios/splash/Default@2x~iphone.png" width"640" />
<splash height"1024" src"resources/ios/splash/Default-Portrait~ipad.png" width"768" />
<splash height"768" src"resources/ios/splash/Default-Landscape~ipad.png" width"1024" />
<splash height"1125" src"resources/ios/splash/Default-Landscape-2436h.png" width"2436" />
<splash height"1242" src"resources/ios/splash/Default-Landscape-736h.png" width"2208" />
<splash height"2048" src"resources/ios/splash/Default-Portrait@2x~ipad.png" width"1536" />
<splash height"1536" src"resources/ios/splash/Default-Landscape@2x~ipad.png" width"2048" />
<splash height"2732" src"resources/ios/splash/Default-Portrait@~ipadpro.png" width"2048" />
<splash height"2048" src"resources/ios/splash/Default-Landscape@~ipadpro.png" width"2732" />
<splash height"1136" src"resources/ios/splash/Default-568h@2x~iphone.png" width"640" />
<splash height"1334" src"resources/ios/splash/Default-667h.png" width"750" />
<splash height"2208" src"resources/ios/splash/Default-736h.png" width"1242" />
<splash height"2436" src"resources/ios/splash/Default-2436h.png" width"1125" />
<splash height"2732" src"resources/ios/splash/Default@2x~universal~anyany.png" width"2732" />
<icon height"57" src"resources/ios/icon/icon.png" width"57" />
<icon height"114" src"resources/ios/icon/icon@2x.png" width"114" />
<icon height"20" src"resources/ios/icon/icon-20.png" width"20" />
<icon height"40" src"resources/ios/icon/icon-20@2x.png" width"40" />
<icon height"60" src"resources/ios/icon/icon-20@3x.png" width"60" />
<icon height"29" src"resources/ios/icon/icon-29.png" width"29" />
<icon height"58" src"resources/ios/icon/icon-29@2x.png" width"58" />
<icon height"87" src"resources/ios/icon/icon-29@3x.png" width"87" />
<icon height"48" src"resources/ios/icon/icon-24@2x.png" width"48" />
<icon height"55" src"resources/ios/icon/icon-27.5@2x.png" width"55" />
<icon height"88" src"resources/ios/icon/icon-44@2x.png" width"88" />
<icon height"172" src"resources/ios/icon/icon-86@2x.png" width"172" />
<icon height"196" src"resources/ios/icon/icon-98@2x.png" width"196" />
<icon height"216" src"resources/ios/icon/icon-108@2x.png" width"216" />
<icon height"40" src"resources/ios/icon/icon-40.png" width"40" />
<icon height"80" src"resources/ios/icon/icon-40@2x.png" width"80" />
<icon height"120" src"resources/ios/icon/icon-40@3x.png" width"120" />
<icon height"50" src"resources/ios/icon/icon-50.png" width"50" />
<icon height"100" src"resources/ios/icon/icon-50@2x.png" width"100" />
<icon height"60" src"resources/ios/icon/icon-60.png" width"60" />
<icon height"120" src"resources/ios/icon/icon-60@2x.png" width"120" />
<icon height"180" src"resources/ios/icon/icon-60@3x.png" width"180" />
<icon height"72" src"resources/ios/icon/icon-72.png" width"72" />
<icon height"144" src"resources/ios/icon/icon-72@2x.png" width"144" />
<icon height"76" src"resources/ios/icon/icon-76.png" width"76" />
<icon height"152" src"resources/ios/icon/icon-76@2x.png" width"152" />
<icon height"167" src"resources/ios/icon/icon-83.5@2x.png" width"167" />
<icon height"1024" src"resources/ios/icon/icon-1024.png" width"1024" />
<splash height"1136" src"resources/ios/splash/Default-568h@2x~iphone.png" width"640" />
<splash height"1334" src"resources/ios/splash/Default-667h.png" width"750" />
<splash height"2688" src"resources/ios/splash/Default-2688h~iphone.png" width"1242" />
<splash height"1792" src"resources/ios/splash/Default-1792h~iphone.png" width"828" />
<splash height"2436" src"resources/ios/splash/Default-2436h.png" width"1125" />
<splash height"2208" src"resources/ios/splash/Default-736h.png" width"1242" />
<splash height"2048" src"resources/ios/splash/Default-Portrait@2x~ipad.png" width"1536" />
<splash height"2732" src"resources/ios/splash/Default-Portrait@~ipadpro.png" width"2048" />
<splash height"1024" src"resources/ios/splash/Default-Portrait~ipad.png" width"768" />
<splash height"960" src"resources/ios/splash/Default@2x~iphone.png" width"640" />
<splash height"480" src"resources/ios/splash/Default~iphone.png" width"320" />
<splash height"2732" src"resources/ios/splash/Default@2x~universal~anyany.png" width"2732" />
<icon height"57" src"resources/ios/icon/icon.png" width"57" />
<icon height"114" src"resources/ios/icon/icon@2x.png" width"114" />
<icon height"20" src"resources/ios/icon/icon-20.png" width"20" />
<icon height"40" src"resources/ios/icon/icon-20@2x.png" width"40" />
<icon height"60" src"resources/ios/icon/icon-20@3x.png" width"60" />
<icon height"29" src"resources/ios/icon/icon-29.png" width"29" />
<icon height"58" src"resources/ios/icon/icon-29@2x.png" width"58" />
<icon height"87" src"resources/ios/icon/icon-29@3x.png" width"87" />
<icon height"48" src"resources/ios/icon/icon-24@2x.png" width"48" />
<icon height"55" src"resources/ios/icon/icon-27.5@2x.png" width"55" />
<icon height"88" src"resources/ios/icon/icon-44@2x.png" width"88" />
<icon height"172" src"resources/ios/icon/icon-86@2x.png" width"172" />
<icon height"196" src"resources/ios/icon/icon-98@2x.png" width"196" />
<icon height"216" src"resources/ios/icon/icon-108@2x.png" width"216" />
<icon height"40" src"resources/ios/icon/icon-40.png" width"40" />
<icon height"80" src"resources/ios/icon/icon-40@2x.png" width"80" />
<icon height"120" src"resources/ios/icon/icon-40@3x.png" width"120" />
<icon height"50" src"resources/ios/icon/icon-50.png" width"50" />
<icon height"100" src"resources/ios/icon/icon-50@2x.png" width"100" />
<icon height"60" src"resources/ios/icon/icon-60.png" width"60" />
<icon height"120" src"resources/ios/icon/icon-60@2x.png" width"120" />
<icon height"180" src"resources/ios/icon/icon-60@3x.png" width"180" />
<icon height"72" src"resources/ios/icon/icon-72.png" width"72" />
<icon height"144" src"resources/ios/icon/icon-72@2x.png" width"144" />
<icon height"76" src"resources/ios/icon/icon-76.png" width"76" />
<icon height"152" src"resources/ios/icon/icon-76@2x.png" width"152" />
<icon height"167" src"resources/ios/icon/icon-83.5@2x.png" width"167" />
<icon height"1024" src"resources/ios/icon/icon-1024.png" width"1024" />
<splash height"1136" src"resources/ios/splash/Default-568h@2x~iphone.png" width"640" />
<splash height"1334" src"resources/ios/splash/Default-667h.png" width"750" />
<splash height"2688" src"resources/ios/splash/Default-2688h~iphone.png" width"1242" />
<splash height"1242" src"resources/ios/splash/Default-Landscape-2688h~iphone.png" width"2688" />
<splash height"1792" src"resources/ios/splash/Default-1792h~iphone.png" width"828" />
<splash height"828" src"resources/ios/splash/Default-Landscape-1792h~iphone.png" width"1792" />
<splash height"2436" src"resources/ios/splash/Default-2436h.png" width"1125" />
<splash height"1125" src"resources/ios/splash/Default-Landscape-2436h.png" width"2436" />
<splash height"2208" src"resources/ios/splash/Default-736h.png" width"1242" />
<splash height"1242" src"resources/ios/splash/Default-Landscape-736h.png" width"2208" />
<splash height"1536" src"resources/ios/splash/Default-Landscape@2x~ipad.png" width"2048" />
<splash height"2048" src"resources/ios/splash/Default-Landscape@~ipadpro.png" width"2732" />
<splash height"768" src"resources/ios/splash/Default-Landscape~ipad.png" width"1024" />
<splash height"2048" src"resources/ios/splash/Default-Portrait@2x~ipad.png" width"1536" />
<splash height"2732" src"resources/ios/splash/Default-Portrait@~ipadpro.png" width"2048" />
<splash height"1024" src"resources/ios/splash/Default-Portrait~ipad.png" width"768" />
<splash height"960" src"resources/ios/splash/Default@2x~iphone.png" width"640" />
<splash height"480" src"resources/ios/splash/Default~iphone.png" width"320" />
<splash height"2732" src"resources/ios/splash/Default@2x~universal~anyany.png" width"2732" />
<splash src"resources/ios/splash/Default@3x~universal~anyany.png" />
<splash src"resources/ios/splash/Default@3x~iphone.png" />
<splash height"2436" src"resources/ios/splash/Default-812h@3x.png" width"1125" />
<splash src"resources/ios/splash/Default@2x~iphone~anyany.png" />
<splash src"resources/ios/splash/Default@2x~iphone~comany.png" />
<splash src"resources/ios/splash/Default@2x~iphone~comcom.png" />
<splash src"resources/ios/splash/Default@3x~iphone~anyany.png" />
<splash src"resources/ios/splash/Default@3x~iphone~anycom.png" />
<splash src"resources/ios/splash/Default@3x~iphone~comany.png" />
<splash src"resources/ios/splash/Default@2x~ipad~anyany.png" />
<splash src"resources/ios/splash/Default@2x~ipad~comany.png" />
</platform>
<plugin name"cordova-plugin-whitelist" spec"^1.3.3" />
<plugin name"cordova-plugin-ionic-keyboard" spec"^2.2.0" />
<plugin name"cordova-sqlite-storage" spec"^5.1.0" />
<plugin name"cordova-plugin-device" spec"^2.0.3" />
<plugin name"cordova-plugin-app-version" spec"^0.1.9" />
<plugin name"cordova-clipboard" spec"^1.3.0" />
<plugin name"onesignal-cordova-plugin" spec"^2.11.2" />
<plugin name"cordova-plugin-statusbar" spec"https://github.com/apache/cordova-plugin-statusbar.git" />
<plugin name"cordova-plugin-splashscreen" spec"^6.0.0" />
<plugin name"cordova-plugin-ionic-webview" spec"^4.2.1">
<variable name"ANDROID_SUPPORT_ANNOTATIONS_VERSION" value"27.+" />
</plugin>
<engine name"android" spec"7.0.0" />
<engine name"ios" spec"^6.1.1" />
</widget>
System:
Ionic:
Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.9
@ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : ios 6.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 8 other plugins)
Utility:
cordova-res (update available: 0.15.2) : 0.8.1
native-run : not installed
System:
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v12.13.0 (/usr/local/bin/node)
npm : 6.12.0
OS : macOS Big Sur
Xcode : Xcode 12.3 Build version 12C33
Thanks.
Solution
Finally i solved.
-I updated the cordova-plugin-ionic-webview to version 5.0.0.
-I installed @ionic-native/ionic-webview(versiyon 5.30.0)
Then i added “viewport-fitcover” to index.html
<meta name"viewport" content"viewport-fitcover user-scalableno, initial-scale1, maximum-scale1, minimum-scale1, widthdevice-width">
finally, i added following css to app.scss
body{
margin: 0;
margin-top: env(safe-area-inset-top);
background: linear-gradient(285deg, #329d65 0%, #019f56 37%, #067247 100%) !important; //without this, status bar background will be white.
}
Now, everything works perfect. i hope it helped someone.
Answered By – Veysel