变化方向与jQuery与-transform

嘿，我想改变我的页面的方向用jQuery这样的：变化方向与jQuery与-transform

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

但it's不工作..哪里是我的错吗？

来源

2013-06-02 Marc Ster

一般来说，我只是想强迫我的手机网页在风景中看到..我怎么用mediaqueries做到这一点？ –

一般来说，强制用户以某种方式使用他们的设备并不是一个好主意 - 这就是响应式设计的全部内容。如果你仍然想这样做，你应该使用我在下面包含的链接中描述的orientationchange事件（也许使用一些功能检测来确保你只在手机/平板电脑上触发这个事件）。请记住，使用css3旋转整个身体会在他们以错误的方式查看您的网站时谋杀设备性能，并可能导致页面滚动出现一般性问题。 – 1nfiniti

是否有某些原因，基于标准的媒体查询技术不适用于您尝试实现的目标？

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（）。

--------

如果由于某种原因，你需要在发生变化时也触发事件，有一些在您的处置方法 - &最少的最有效昂贵的一个正在侦听window.resize（）（这应该只在传统的IE浏览器上完成）。

有关您可以使用的某些技术的更详细的分类，请参阅this link。

来源

2013-06-02 16:43:31 1nfiniti

好吧，这是一种方式。但我不想使用两个css文件..没有办法让肖像视图看起来像景观一样吗？感谢您的答案，非常感谢您的帮助 –

您不需要在这里使用2个css文件 - 代码放在一个css文件中......您需要根据布局设置不同的元素样式。所以有时候你肯定会把事情放两次，但这就是响应式设计的全部内容。使纵向和横向看起来相似而不会将css的每一行都加倍的最简单方法是对布局使用一般基于百分比的宽度，并且只在特殊情况下才会覆盖它们。 – 1nfiniti

好的谢谢你的回复:) –

变化方向与jQuery与-transform

回答

相关问题