app rendering different in android than ios

kazar54

unread,

Dec 28, 2015, 2:24:07 PM12/28/15

to phonegap

I have an app on the app store that renders the screens just right for all iphones and ipads. Here is a screen shot of one of the pages...

However, once I rebuilt the app in PGB for android and uploaded it to the Google Play store and it was published the screen now renders like this...

I looked at some other posts and some suggest looking at the viewport and changing the densitydpi while others say look at the CSS and some of the absolute positioning I have used. Just wondering if anyone can redirect me to why the iOS build looks like I want but the Android one is much smaller when they are using the same code in the www folder and all the same html, css, and js files. Is Android looking for something that is not there in the code I have or did iOS negate some code I had and Android is rendering that.

Auto Generated Inline Image 1

Auto Generated Inline Image 2

Kerri Shotts

unread,

Dec 28, 2015, 2:56:32 PM12/28/15

to phonegap

Awful hard to help when you've not shown any HTML/CSS code. What device(s) have you tested on? What version(s) of Android and iOS? Did any Android emulator(s) prior to uploading to the store exhibit the same problem?

I suspect pixel densities and a failure to build a responsive design. But without seeing any code, it's awful difficult to say for sure.

kazar54

unread,

Dec 28, 2015, 3:17:34 PM12/28/15

to phonegap

Here is the html from the top of the page I have loaded...
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <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" />

and some of the css...

body {
    height: 100%;
    position: fixed;
    overflow-y: scroll;
    margin: 0px;
    padding: 0px;
    width: 100%;
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-weight: 300;
}

.text {
    width: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border: none;
    font-size: 30px;
}

#equals {
    cursor: pointer;
    border: none;
    background-color: #ffffff;
    font-size: 20px;
    border-style: solid;
    border-color: #007AFF;
    border-width: 2px;
    border-radius: 2px;
    outline: none;
    margin-top: 15px;
    font-size: 30px;
}

#waterTank {
    position: relative;
    top: -50px;
    z-index: 2;
}

#whiteCover {
    position: absolute;
    width: 100%;
    height: 600px;
    background-color: #ffffff;
    top: 402px;
    z-index: 2;
}

Again, if it is a responsive issue why would it render like I want on iOS and not on the Android? Wouldn't the iOS version also render incorrectly?

Jesse Monroy

unread,

Dec 28, 2015, 5:00:37 PM12/28/15

to phonegap

If using iOS9, which I suspect. CSP needs to implemented.
See answer given to same OP on nitobi.

http://community.phonegap.com/nitobi/topics/app-renders-differently-in-android-than-on-ios

ALSO, there is a bug with the viewport in iOS, I beleive the solution is remove target-densitydpi=device-dpi

Jesse

Kerri Shotts

unread,

Dec 28, 2015, 6:37:00 PM12/28/15

to phonegap

Well, it looks to me like you've designed it to look right on an iPhone screen with a specific pixel density. Android devices (and other iOS devices) have different pixel densities. You've not posted what it looks like on iPad, but I find it hard to imagine that it perfectly lines up. And I bet if you put this on, say, an iPhone 6s+, you'd see more differences.

Furthermore, although you could use target-densitydp, it's deprecated. See http://www.petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/. Instead, you should design responsively from the get-go, but based on the above, you aren't doing that -- since you've got a lot of "px" units in that code. You've got some percentages in there, which are better, but without actually seeing your DOM structure, it's possible they aren't doing you much good either.

You SHOULD avoid using PX units whenever possible. Use REMs if you want a consistent unit to measure against (whilst still being able to change the size responsively), and whenever possible avoid constraining elements unnecessarily -- use percentages (position absolute with top:0; left: 0; right: 0; bottom: 0 is quite useful inside other relatively/absolutely positioned elements). If you're only targeting relatively modern devices, you can use a lot of tools that make layout a lot easier, like flex box.

I've coded up an example that looks similar to yours, although I've not implemented everything exactly. I wouldn't normally build the gauge this way (I'd use SVG, but I'm being lazy), and I'd normally try and make sure this is accessible, but this should give you a good idea how you can use flex-box to make layouts that adjust themselves to the available screen real estate. I've hard-coded some minimums, though normally you'd have some media queries in place to switch to a different layout.

[ Example ]

The example uses flex-box, so it only works on modern(-ish) devices:

- Android 4.4 or higher (or Chrome 37 or higher if using Crosswalk)

- iOS 7.0 or higher

For older devices there are plenty of other ways to render the same layout flexibly. I'm also not going to proclaim that how I've done this is the best way to do it, of course -- I've got a cold, and am doped up, and this was thrown together very quickly. But hopefully it gives you some good ideas.

One other note: flex-box isn't exactly fast, so if you're doing lots of animations and such where the browser needs to recalc the layout, you may need to use a different layout. This is less of a problem on iOS, but Android devices tend to be much slower with layout and JS due to their slower single core performance.

...

kazar54

unread,

Dec 28, 2015, 7:14:08 PM12/28/15

to phonegap

Wow thanks a lot Kerri! You are awesome! You saved me before on an issue I had (several weeks ago) with my app crashing on iOS devices and it ended up being my splash screen sizes. I have already resubmitted a newer version to Google Play using some of the suggestions from Jesse so I am waiting to see what happens there before proceeding but I will definitely save your suggestions and your codepen to show to my app team to consider redoing the html and css. To answer one of the other questions you had, the app on iOS fits an ipad rather well, it down not fill it up completely but is big enough and the 6+ it looks great as well. The only iOS device it doesn't fit on is an iphone 4. there the screen size is too small and the figures get cutoff. One other thing I will add is that I have other pages with less graphics where everything fits fine but when I go to other pages everything is shrunk.
Page that looks the same on both iOS and Android...
iOS

android...

But this is what my html looks like on this home page file (added the CPS code from Jesse's post)...
<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
<link type="text/css" rel="stylesheet" href="css/index.css" />

<link type="text/css" rel="stylesheet" href="css/menu.css" />
<link type="text/css" rel="stylesheet" href="css/Home.css" />
<link type="text/css" rel="stylesheet" href="dist/css/jquery.mmenu.all.css" />

and some of the css from it...

body {
    height: 100%;
    position: fixed;
    overflow-y: scroll;
    margin: 0px;
    padding: 0px;
    width: 100%;
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-weight: 300;
}

.text {
    width: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border: none;
    font-size: 30px;
}

#equals {
    cursor: pointer;
    border: none;

background: none;

    border-style: solid;
    border-color: #007AFF;
    border-width: 2px;
    border-radius: 2px;
    outline: none;
    margin-top: 15px;
    font-size: 30px;

    width: 90px;
    padding-left: 0px;
    padding-right: 0px;

}

#waterTank {
    position: relative;
    top: -50px;
    z-index: 2;
}

#whiteCover {
    position: absolute;
    width: 100%;
    height: 600px;
    background-color: #ffffff;
    top: 402px;
    z-index: 2;
}

Any particular reason why these pages seem to render the same from iOS to android and the others do not? Should I remove all the

Auto Generated Inline Image 1

Jesse Monroy

unread,

Dec 28, 2015, 7:22:29 PM12/28/15

to phonegap

@Kerri,
thanks for posting the link. I've found the offending source. It is from Phonegap Hello World
FWIW: Phonegap is under some changes. SEE Where is the support crew?
I've file a bug report with Phonegap
https://github.com/phonegap/phonegap-app-hello-world/issues/7

Jesse

kazar54

unread,

Dec 28, 2015, 9:52:53 PM12/28/15

to phonegap

Jesse and Kerri,
I adjusted my code from the suggestions Jesse made but several of my app pages are showing up very small unlike how they render on iOS. Here are some of the code I implemented from Jesse's post... (Jesse just to be sure, do I need to put this CPS code on every html page my app references or just the index.html?)

on index.html

on config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
    xmlns:gap = "http://phonegap.com/ns/1.0"
    id        = "our group"
    version   = "1.3">

<name>Watertank Math</name>

<description>
Teaching addition and subtraction of integers.
</description>

<author href="my webpage here" email="mine here">
yours truely
</author>

<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="orientation" value="portrait"/>

<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />

I did not adjust any CSS as Kerri suggested but since there was no change I take it I might need to look at that more now.

Let me just add this in...when we were building the app we used the phonegap developer app and all the pages looked fine, none were smaller than others and both the iOS and Android devices we ran off the phonegap serve command using the terminal both looked equivalent. The fact that the phonegap developer app looked the same on both iOS and Android help at all?

Kerri Shotts

unread,

Dec 28, 2015, 10:44:21 PM12/28/15

to phonegap

First, this is the viewport meta tag that I use in my apps:

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

Note the loss of "height=device-height" and your "target-densitydpi=device-dpi". You don't need either one (and the latter is deprecated). I also don't use "maximum-scale" -- if the viewport isn't scaleable, it really shouldn't matter. "minimum-scale=1.0" is there to hint to Chrome that it should use the GPU rasterizer (Android only).

Second, I took a look at your app listing in the iOS App Store. The iPhone screen captures look fine. But on the iPad captures, there's a lot of wasted space. That's... not great. Having your content sitting in the center of the screen in a narrow column (and failing to fill the height, even) doesn't make for a great experience, in my opinion. Instead, I'd suggest making a separate layout for wider screens such that the tank is on the left and the controls are on the right I've also updated the example to include a media query that illustrates this. It renders as before on a narrow form factor, but switches to a two-column layout when we have a wider screen. (I'd also suggest going one step further: use a split view so that the menu is always present when a tablet is in landscape mode to further efficiently utilize space.)

Third, You'll want to consider adding the status bar plugin so that you can change the iOS status bar text to white. Having black on a dark blue doesn't look good.

Fourth, I took a look at your app listing in the Google Play store, and noticed that it looks like you're reserving space for the iOS status bar. You can use the status bar plugin to reserve that space instead, which would mean you wouldn't have to do so in your CSS. That would make your Android screen shots look better. (And you could follow the more recent trend of coloring the Android status bar a different shade, too.)

Fifth, don't assume that the PhoneGap Developer App is the same as running a build version (it isn't!). Always test an actual release build on your device before submitting to a store in order to catch out problems like these before going into production. Now, if your pre-Google Play APK works correctly, but your post-Google Play APK doesn't, well, then we're in odd territory, because the download source shouldn't matter. Speaking of which, what are you using to generate the APK? PhoneGap Build? Or are you building locally?

Sixth, It looks like you're targeting iOS 6+ and Android 4.0+. I suggest using Crosswalk for Android 4.0+ in order to save some of your hair (otherwise you'll be pulling it out), but it does come at a size increase of your APK. iOS didn't support modern flex-box until iOS 7, so you'd need a different layout for <7, if you insist upon supporting iOS 6. (Personally? Aim for Android 4.4+ and iOS 8+. But you may not necessarily have that option, of course.)

Hope that helps some.

On Monday, December 28, 2015 at 8:52:53 PM UTC-6, kazar54 wrote:

...

kazar54

unread,

Dec 28, 2015, 10:54:42 PM12/28/15

to phonegap

Those are some great points Kerri and I will definitely take note. I have a lot to learn about creating apps that make them engaging, this is our first app ever as a team so we are learning a lot as we go for sure. I do appreciate the replies and the suggestions. We did build the APK with PGB. I will change the meta tags to fit what you have and hopefully that will resolve my issue.

kazar54

unread,

Dec 29, 2015, 1:53:40 PM12/29/15

to phonegap

Kerri and Jesse, the app looks good now after I used the meta tag suggested from Kerri. Thanks once again Kerri!!

Kerri Shotts

unread,

Dec 29, 2015, 3:38:41 PM12/29/15

to phonegap

You're welcome. Best of luck with the app and any future projects.

Reply all

Reply to author

Forward