變化方向與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

回答

相關問題