Search code examples
androidhtmlioscssmedia-queries

How to use media Queries for Hybrid applications

I want to display all my pictures on every device in the page, without needing to scroll down to see them for my Hybrid App.

What I learned is that because there exist different screen sizes I should use Media Queries.

I'm therefore using for the iPhone 4 for example something like: 

@media only screen

and (min-width : 320px)
and (min-height : 480px) 
and (max-width : 320px)
and (max-height : 480px) 
{ 
Content
}

So if it is an Iphone 5, display the pictures on that size that I specify.

As there are a lot of phones using the same media query width and height, I thought that I will just do this for all the androids and ios devices which I found here: http://www.canbike.org/CSSpixels/

Am I on the right track?

Thank you in advance

Solution

  • Read This First(1)

    Then Read this Media

    /* For lower than 700px resolutions */
@media (max-width: 700px) { ... }
/* Same as last but with the device orientation on land scape */
@media (max-width: 700px) and (orientation: landscape) { ... }
/* Including width and orientation you can add a media type clause,
   in this case 'tv' */
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* for low resolution display with background-image */
.image {
    background-image: url(/path/to/my/image.png);
    background-size: 200px 300px;
    height: 300px;
    width: 200px;
}
/* for high resolution (Retina) display with background-image */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    -repeat;
        background-size: 200px 400px;
    /* rest of your styles... */
    }
}

    To know about Developing Mobile Web Apps: When, Why, and How

    Some Useful data from the Link(1)

    The tricky bits

    However, there are two tricky bits: the device-width media query and the <meta name="viewport" width="device-width"> tag. Both work with device pixels, and not with CSS pixels, because they report on the context of the web page, and not on its inner CSS workings.

    The media query

    The device-width media query measures the width of the device in device pixels. The width media query measures the total width of the page in CSS pixels, which, for reasons I’ll explain later, is at least 980px on the iPhone.

    enter image description here

    div.sidebar {
    width: 300px;
}

@media all and (max-device-width: 320px) {
    // styles assigned when device width is smaller than 320px;
    div.sidebar {
        width: 100px;
    }

}

    Now the sidebar is 300 CSS pixels wide, except when the device width is 320 device pixels or less, in which case it becomes 100 CSS pixels wide. (You stil follow? This is complicated.)

    By the way, in theory you could use a media query that queries the device screen in centimeters or inches (@media all and (max-device-width: 9cm)). Unfortunately it seems badly to outright unsupported, even by the iPhone. The problem here is that physical units such as inches are usually translated to (CSS) pixels; thus width: 1in equals 96 pixels on all browsers I tested so far (and that’s quite a few). So these media queries are unreliable.

    The <meta> tag

    In general is even more useful. This tag, originally Apple-proprietary but meanwhile supported by many more mobile browsers, actually makes the layout viewport fit the device exactly.

    Now what is the layout viewport? It’s the area (in CSS pixels) that the browser uses to calculate the dimensions of elements with percentual width, such as div.sidebar {width: 20%}. It’s usually quite a bit larger than the device screen: 980px on the iPhone, 850px on Opera, 800 on Android, etc.

    enter image description here

    If you add <meta name="viewport" width="device-width">, the width of this layout viewport is constrained to the device width in device pixels; 320 of them in the iPhone’s case.

    That matters if your pages are narrow enough to fit in the screen. Take this page without any CSS width statement and without the <meta> tag. It stretches over the full available width of the layout viewport.

    enter image description here

    This is probably not what you want. You want to fit the text nicely on the screen. That’s the task of <meta name="viewport" width="device-width">. When you add it, the layout viewport is contracted (to 320px in the case of the iPhone), and the text fits.

    enter image description here