Different screen orientations with the same css file

Question

I've put the following meta tag in my mobile HTML

 <meta name = "viewport" content = "initial-scale = 1.0">

After I coded the css file for mobile version, I realized it doesn't look good on lanscape mode since it has a different width size. I get an empty 160 pixel area on the right side.

Other than writing a separate css file for landscape mode, is there any way getting out of this?

score 2 · Answer 1 · answered Jul 12 '12 at 16:39

You also need to bind the orientation change event. You can do it with this sample script:

<script>
$(function(){

  function orient() {  
    if (window.orientation == 0 || window.orientation == 180) {
      $('.featured').css('display','none');
    orientation = 'portrait';
        return false;
    }
    else if (window.orientation == 90 || window.orientation == -90) {
      $('.featured').css('display','block');
        orientation = 'landscape';
        return false;
    }
  }

  $(window).bind( 'orientationchange', function(e){
    orient();
  });

})();

</script>

score 1 · Answer 2 · answered Jul 12 '12 at 16:28

If your css layout is based on screen percents instead of absolute values it should allow you to adjust to any screen layout without multiple css files just fine.

Look at the percent option: http://www.w3schools.com/cssref/pr_dim_width.asp

Or if you had a layout you wanted constant, you could center it.

score 0 · Answer 3 · answered Jul 12 '12 at 16:28

0

center align the outise wrapper.

body{
    max-width:786;/*target size of page*/
    margin:0 auto auto auto;
}

is the easiest way.

answered Jul 12 '12 at 16:28

Dpolehonski

948
6
11

additional comment: just because it may be the easiest doesn't mean it'll be the best. – Dpolehonski Jul 12 '12 at 16:29
Mobile devices vary so much in dimensions that the best bet is a % based layout for the width. Takes a bit of getting your head round but it's so much better. – SpaceBeers Jul 12 '12 at 16:35

score 0 · Answer 4 · edited May 23 '17 at 10:09

You can use media queries to detect orientation changes and run different styles for each all in the same stylesheet.

Also for mobile it's a good idea to you use % rather than px for widths - what units do you use for css for mobile web apps?

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

Different screen orientations with the same css file

4 Answers4