why is the whole screen zooming-in on iOS app?

Question

I'm working on an iOS (8 and 9) app. I'm using phonegap build to pack everything up and phonegap desktop along with phonegap developer app to do some tests. My UI is already designed and everything looks fine when using the phonegap developer app as well as in mobile safari, but when i port it to my device, the UI looks blurry, including font, borders, divs, even, the status bar and keyboard.

Here's the correct view, using Phonegap app and mobile safari: Good

And Here's the actual view when installed.: Bad quality

I have set the viewport and scales but they do not affect the status bar nor the keyboard.

Here's my XML

<preference name="phonegap-version" value="3.7.0" />
        <preference name="orientation" value="default" />
        <platform name="ios">
            <preference name="Orientation" value="all" />
        </platform>
        <preference name="fullscreen" value="true" />
        <preference name="target-device" value="universal" />
        <preference name="webviewbounce" value="true" />
        <preference name="prerendered-icon" value="true" />
        <preference name="stay-in-webview" value="true" />
        <preference name="ios-statusbarstyle" value="lightcontent" />
        <preference name="android-windowSoftInputMode" value="adjustPan" />
        <preference name="ShowSplashScreenSpinner" value="false" />
        <preference name="detect-data-types" value="true" />
        <preference name="exit-on-suspend" value="false" />
        <preference name="show-splash-screen-spinner" value="false" />
        <preference name="auto-hide-splash-screen" value="false" />
        <preference name="SplashScreenDelay" value="5000" />
        <preference name="EnableViewportScale" value="true" />
        <preference name="TopActivityIndicator" value="gray" />
        <preference name="KeyboardDisplayRequiresUserAction" value="false" />
        <preference name="HideKeyboardFormAccessoryBar" value="true" />
        <preference name="SuppressesIncrementalRendering" value="true" />
        <preference name="android-minSdkVersion" value="18" />
        <preference name="android-installLocation" value="internalOnly" />
        <preference name="ErrorUrl" value="" />
        <preference name="BackgroundColor" value="0x000000" />
        <preference name="KeepRunning" value="true" />
        <preference name="DisallowOverscroll" value="true" />
        <preference name="LoadingDialog" value="" />
        <preference name="LoadUrlTimeoutValue" value="20000" />
        <preference name="disable-cursor" value="true" />
        <gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true">
            <false/>
        </gap:config-file>
        <content src="index.html" />
        <gap:platform name="ios" />
        <gap:platform name="android" />

I have to mention that using a newer version of CLI does not solve the issue.

Here's my meta tag

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

Phonegap desktop's example app is also showing this behaviour.

Do you have any ideas of what may be happening?

score 1 · Accepted Answer · answered Jan 14 '16 at 07:38

I Found the issue. It turns out that, since iOS 9, the splashscreen requirements changed. So, when the .ipa was created, there were some files missing (The splashscreen for iPhone 6 and 6+).

Adding the next xml code to my config.xml

<gap:splash src="Splash/Default-667h@2x.png" gap:platform="ios" width="750" height="1334" />
<gap:splash src="Splash/Default-Portrait-736h@3x.png" gap:platform="ios" width="1242" height="2208" />
<gap:splash src="Splash/Default-Landscape-736h@3x.png" gap:platform="ios" width="2208" height="1242" />

and the corresponding files made the trick. Now the view seems really sharp.

Hope this helps someone.

why is the whole screen zooming-in on iOS app?

1 Answers1