使用-transform使用jQuery更改方向

时间:2013-06-02 16:33:28

标签: jquery orientation

嘿,我想用jQuery改变我的页面方向:

$(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();

但它不起作用..我的错在哪里?

1 个答案:

答案 0 :(得分:2)

是否有一些理由认为更多基于标准的媒体查询技术无法满足您的目标?

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

当方向发生变化时,这些样式会自动启动 - 因此您不需要监听window.resize()。

<强> --------

如果由于某种原因,您还需要在发生变化时触发事件,您可以使用多种方法 - 效果最差&amp;最昂贵的一个正在监听window.resize()(这应该只在传统的IE浏览器上完成)。

this link提供了您可以使用的一些技术的更详细分类。