Re: Screen dimension differences between development and device

[Abdu Adil]

Why are you not using jquery mobile for visualization, it will stretch ui to screen size, you need 0 css to have awesome looking app.

On Saturday, May 18, 2013 7:34:19 AM UTC+8, Sean Bollin wrote:

Hi I am developing a phonegap application for iPhone.  I do most of my development and testing in Chrome on my MacBook Pro.

Currently my setup is that I have two different stylesheets: browser.css and iphone.css

When I am developing and testing in Chrome I need to use the browser.css and when I put it on the device I need to use iPhone.css

I'm using a lot of absolute positioning for my apps CSS.  The positioning is a few hundred pixels different for Chrome vs. on-device-iPhone.  Is this common?  Am I missing something?

It's quite time consuming to manage two different CSS files.

Here is some of my app's CSS:

body {

    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */

    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */

    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

    background-color: #000000;

    font-family: KozMinPro, 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;

    font-size: 18px;

    margin: 0px;

    padding: 0px;

    background-image: url('../img/bg_with_ui_v1.png');

    background-repeat: no-repeat;

    background-size: 50%;

    width: 640px;

    height: 960px;

}

[jcesarmobile]

why don't you try on a real device or on the simulator instead using chrome?

[Sean Bollin]

Because it is a lot faster to refresh the application in Chrome each time I make a code change.

It takes a long time to re-build the code in Xcode for every single code change.

[Sean Bollin]

I'm making a video game with completely custom art.  I'm not sure how jquery mobile would help me?

[jcesarmobile]

But the simulator and the device have web browsers where you can test the web

[Sean Bollin]

That's an interesting idea. :)  Thanks.

I suspect that I will still be left with the same problem however: even the browser on the simulator will display my app at a different size than when ran as an actual application.

I'll try it out though..

[Sean Bollin]

Ok great this works, and is exactly what I need.  No more desktop browser testing, I'll just test in the devices web browser.

Thank you!!

[Sean Bollin]

Hrmm... on second thought, I guess the disadvantage to this is that I don't get to use the Chrome inspector for debugging my javascript

[Sean Bollin]

Ok here is what I need:

http://stackoverflow.com/questions/2767902/what-are-some-methods-to-debug-javascript-inside-of-a-uiwebview

[WebSteve]

Unless it was a game made for specific devices, you should be using responsive web techniques. No absolute positioning should be required. With responsive techniques, the app sizes for each screen size and orientation. For an example, visit microsoft.com and resize the browser window to see the content shift to fit the screen. See my links to learn more.

http://iphonedevlog.wordpress.com/phonegapcordova-crib-sheet/

[Sean Bollin]

Yes you're right responsive web techniques would be best.  However, I am just making it for iPhone only at the moment.  Really at this point I need to balance learning new things (responsive web techniques) with getting the damn thing done.