App not full screen on iPhone 5S

ionic-v1
1

I seem to be having a similar issue as this guy:

But that doesn’t seem to fix it for me :frowning:

I have this in my app.html:

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

Here is a screen cap with my resources splash screen on the left and the config file on the right

image
image2288×950 594 KB

So I think the recommended lines are in there.

My versions are:

09:11:38 ~/ionic/quintro (master *) $ npm --version
1.4.28
09:11:43 ~/ionic/quintro (master *) $ ionic --version
1.5.2

This behavior is seen in the iPhone 5s simulator and on the device itself. It works fine in the browser and in the iPhone 6 simulator (don’t have a hardware 6 to test against).

image
image658×1202 49.9 KB

Any ideas?

2

It looks almost as if it’s being built as an iPhone 4 screen size.

  1. What version of OS X are you running
  2. What version of Xcode are you running
  3. Are you building for a target above iOS 5, like iOS 7 or 8.1?
  4. What cordova version are you using? (using “cordova -v” or “npm info cordova”
3

I had the same problem a time ago. For it was solved by regenerating the splashscreens. Probably the splashscreens had the wrong dimensions.

4

Another thing to check is that viewport tag.

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

This is the meta tag we use as it works on every platform without any issues.

5

Thanks everyone for being so quick as to what happened. I figured out the problem.

I created a new empty project from scratch. This blank project didn’t have the same issue I was having. After lots of comparing, I noticed my app had v1.0.0rc3 of ionic and the blank project was on v.1.0.0.

I copied over the /lib/ folder from the blank project to my project and that fixed it. Hooray!

So don’t use v1.0.0rc3

edit: apparently running ‘ionic lib update’ should also fix this as well

1 Like