Mobile device responsive design layout

Question

I've just moved from native iOS dev to cross platform. I'm using phonegap and I would like to create different layouts based on device screen size and orientation. What I would like to do is something similar to this code

if(orientation == LANDSCAPE)
{
    if(screen.width < 320)
    {
        //use css #1
    }
    else
    {
        //use css #2
    }
}
else //orientation is PORTRAIT
{
    if(screen.width < 320)
    {
        //use css #3
    }
    else
    {
        //use css #4
    }
}

Or if it's not the appropriate way to do design, then how do I do it?

Why do you want to compare the screen width? Is it for comparing iPod/iPhone against iPad? Or, is it for another reason? — Littm, Sep 24 '12 at 07:36

Michał Miszczyszyn · Accepted Answer · 2012-09-24T07:42:46.447

It strogly depends on what you want to do. If you intend to change the logic or add/remove elements from the DOM based on device's resolution or screen orientation, then go with the JS way. If you're using jQuery it's as simple, as that:

var deviceWidth = $(window).width();
var deviceHeight = $(window).height();

Yet, CSS itself provides the way for conditional styles depending on screen size. These are called media-queries ( http://www.w3.org/TR/css3-mediaqueries/ ) and you can use them as follows:

@media only screen and (max-device-width: 480px) {
    body {
        font-size: 2em;
        /* etc. these styles will be applied only when device's screen is smaller than 480px */
    }
}

There are many more properties which you can use. max-device-width is just and example. Moreover you can prevent the browser from loading the style file at all if the device's size is not proper:

<link rel="stylesheet" media="only screen and (max-width-device: 480px)" href="480-device.css" />

Look at the w3c documentation or just search for media-queries. They're compatible with almost every browser now: http://caniuse.com/#feat=css-mediaqueries

score 0 · Answer 2 · edited May 23 '17 at 10:25

Given that PhoneGap wraps Web apps into a native shell, you are essentially doing Web development at this point. You need to look into media queries. For the code you published, the appropriate media queries would look similar to the following:

/* Landscape */
@media screen and (orientation: landscape) {
    /* Landscape styles */
}

/* Portrait */
@media screen and (orientation: portrait) {
    /* Portrait styles */
}

/* Portrait and screen width < 320 */
@media screen 
and (orientation: portrait)
and (max-width: 320px) {
    /* Portrait styles for screen smaller than 320 pixels */
}

The media query specification says you should be able to nest media queries, that would more closely match the structure of your control statements, but unfortunately most modern browsers do not yet support this.

score 0 · Answer 3 · answered Sep 24 '12 at 07:44

I think you may try the following JS code:

function _orientationHandler() {
    if(event.orientation){
        if(event.orientation == 'portrait'){
            if(screen.width < 320)
            {
                //use css #1
            }
            else
            {
                //use css #2
            }
    }
    else if(event.orientation == 'landscape') {
        if(screen.width < 320)
        {
            //use css #1
        }
        else
        {
            //use css #2
        }
    }
}

$(window).bind('orientationchange', _orientationHandler);

Mobile device responsive design layout

3 Answers3