大家好，我是大澈！

本文約?700+?字，整篇閱讀約需?1?分鐘。

每日分享一段優質代碼片段。

今天分享一段 JS?代碼片段，用于在H5端監聽設備方向的變化。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！

$(document).ready(function()?{function?handleOrientationChange()?{if?(window.orientation?===?0?||?window.orientation?===?180)?{//?Portrait$('body').css('transform',?'rotate(90deg)');}?else?{//?Landscape$('body').css('transform',?'rotate(0deg)');}}//?Listen?for?orientation?changes$(window).on("orientationchange",?handleOrientationChange);//?頁面加載時進行初始方向檢測handleOrientationChange();
});

分享原因

這段代碼提供了一個實用的解決方案，可以檢測設備方向的變化并根據方向更改頁面的樣式。

這在移動設備上非常有用，因為用戶可能會旋轉他們的設備來更好地查看內容。

代碼解析

1.?$(document).ready(function() { ... });

確保頁面DOM完全加載后再運行內部代碼。

這是一個jQuery的基礎方法。

2. if (window.orientation === 0 || window.orientation === 180)

檢查設備方向是否為豎屏模式（0度或180度）。

這里是代碼最關鍵的地方。

3.?$('body').css('transform', 'rotate(90deg)');

如果是豎屏模式，旋轉頁面90度。否則（橫屏模式），恢復正常的旋轉角度（0度）。

這里的代碼可以自定義，按項目實際需求來寫即可，就是在旋轉時打算要做的操作或者要調整的樣式。

4.?$(window).on("orientationchange", handleOrientationChange);

監聽窗口的orientationchange事件，當設備方向變化時調用handleOrientationChange函數。

- end -