App on device looks different from simulator and browser serve

Hi.

My app looks the way I want on both the iOS Simulator and the Ionic Serve, but it looks very different on my device, which is an iPhone 4S with iOS 7.0.6. The CSS doesn’t render the same, as you can see on the screens below (the left one is how it should look). It seems it’s a iOS version problem, since the Simulator runs iOS 8.1, and I believe Ionic does it too.

How can I fix it? And if this really is a iOS version issue, is there a way to serve different iOS versions for browser testing?

Thanks!

image

can you try it on Simulator with ios 7?

There are a lot of factors. So I assume you’re using a Mac. In safari whatever renders is essentially going to be the same for the iPhone. Even the new webkit stuff in iOS8 shouldn’t alter that. It’s also possible that maybe one of your style files is not included correctly in the project?

Last thing is if you’re using chrome or firefox, they may use different styling rules in their renderers than safari for OS X and iOS do.

Just some ideas to maybe help narrow it down

Thanks to both of you.

I found out the problem. I was using viewport width relative sizing (vw), and when I switch to pixel sizing it rendered correctly.

It really is a version issue, as it presented the same problem on iOS 7.1 Simulator (which I didn’t know existed until I read tuananh’s reply).

I was using viewport sizing so it would fit in any device width. Is there a relative sizing styling technique as a replacement for viewport and that would work for older technologies?

Is going to be a great way to get what you need. It won’t help as much for the vertical spacing but the horizontal can be done using this. And of course, % widths never fail! Just be sure to test them cross devices. I’ve used the vh and vw a few times, or attempted, but I found them very difficult go get accurate. Not to mention cross platform :S

Hi, i have a question, i have the same problem at my ionic cordova app when i run on xcode simulator, i dont have any visual shrink or smaller screen problem, but when we test on ios/iphone device, screen looks definetly smaller, like iphone 4 or something. My coworker test on android device, and he did not see any screen issue. I did usb device connected and run xcode again , yes screen looks smaller again. when i looked your comment u mention viewport size, but my viewport at index.html looks like below:

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

i dont have any size thing like your solution vw or px, so which place that viewport you mention.
Also my config.xml file dont have anything about viewport, is that ok or normal?

thanks for help and time

p.s. this is my first ionic app, i mean zero experience :slight_smile:

that link solution from @coder solved my issue,