0

Hey i want to change the orientation of my page with jQuery like that:

$(window).resize( function(){

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

if(width<height) {
$('body').css({'transform:rotate(90deg);-ms-transform:rotate(90deg); -webkit-transform:rotate(90deg); '});        
} 
}).resize();

but it´s not working.. where is my fault?

Marc Ster
  • 2,276
  • 6
  • 33
  • 63
  • Generally speaking, i just want to force my mobile webpage to be seen in landscape.. how would i do it with mediaqueries? – Marc Ster Jun 02 '13 at 16:45
  • Generally speaking, it's not a good idea to force a user to use their device in a certain way - that's what responsive design is all about. If you still want to do that anyway, you should use the orientationchange Event described in the link I've included below (and perhaps use some feature detection to try and make sure you're only firing this on phones/tablets)... Keep in mind that rotating your entire body with css3 is going to murder device performance when they're looking at your site in the wrong way, and can cause general issues with page scrolling. – 1nfiniti Jun 02 '13 at 16:52

1 Answers1

2

Is there some reason the more standards based media queries technique won't work for what you're trying to acheive?

CSS:

@media only screen and (orientation : landscape){
    /* css inside this block only affects width>height situations */
}

@media only screen and (orientation : portrait){
    /* css inside this block only affects height<width situations */
}

These styles will automatically kick in when an orientation change occurs - so you don't need to listen for window.resize().

--------

If, for some reason, you need to also trigger events when a change occurs, there are a number of methods at your disposal - the least effective & most expensive one being listening for window.resize() (this should only be done on legacy IE browsers).

A more detailed breakdown of some of the techniques you can use is available at this link.

1nfiniti
  • 2,032
  • 14
  • 19
  • Ok that is a way. But i don´t want to use two css files.. Isn´t there a way to just make the portrait view look the same like landscape? Thanks for the answers really appreciate your help – Marc Ster Jun 02 '13 at 17:04
  • You don't need to use 2 css files here - that code goes inside one css file... You do need to set different styles on elements based on the layout. So sometimes you're definitely laying things out twice, but that's what responsive design is all about. The simplest way to make portrait & landscape look alike without doubling every line of your css is to use general percentage based widths for your layout, and only override them in special situations. – 1nfiniti Jun 02 '13 at 17:20