CODEWITHSUNDEEP
cssmobile
archvile
archvile

Reputation: 199

Different screen orientations with the same css file

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?

Upvotes: 0

Views: 276

Answers (4)

marcinsdance
marcinsdance

Reputation: 654

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>

Upvotes: 2

SpaceBeers
SpaceBeers

Reputation: 13947

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 */
}

Upvotes: 0

Dpolehonski
Dpolehonski

Reputation: 958

center align the outise wrapper.

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

is the easiest way.

Upvotes: 0

Nathan Tornquist
Nathan Tornquist

Reputation: 6609

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.

Upvotes: 1

Related Questions