Question

So i’m making a mobile web application that is supposed to take up a 100% of the screen without scrolling (in either direction).

I have fixed positions for the different area’s of the screen.

    html, body{
    height: 100%;   
    margin: 0;
    padding: 0;
    width: 100%;
}

.site-header{
    position: fixed;
    top: 0px;
    height: 10%;    
    background: red;
    width: 100%;
}

.site-article{
    position: fixed;
    top: 10%;
    bottom: 10%;    
    background: white;
    width: 95%;
}

.site-footer{
    position: fixed;
    bottom: 0px;
    height: 10%;    
    background: blue;
    width: 100%;
}

.site-nav{
    position: fixed;
    top: 10%;
    bottom: 10%;
    right: 0px;
    background: green;
    width: 5%;
}

I know there are media queries for css like the following

 @media only screen and (orientation:portrait)

Where you can switch the orientation between portrait and landscape, but I can’t think of anything to put between the two orientations as the width and height both need to stay 100% for each correct?

It displays correctly on my ipad, then you change the orientation and scrolling is needed (both horizontally and vertically). If I keep the orientation and refresh the page, it loads the page with the correct positions.

Is there anyway to do this using media queries with css or am I going to have to dive into some javascript? I need to be able to support multiple mobile devices, from android phones and tablets to ios phones and tablets.

Answer 1

Just FYI. Height 100% only extends to the bottom of the viewport. Anyways, instead of using orientation try using min-width and min-height media queries. And set up different break points for different resolutions.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}