在移動設備上，有時我們需要鎖定屏幕為橫屏狀態，這樣可以更好地展示頁面內容。在html5中，我們可以使用以下代碼實現橫屏設置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
@media screen and (orientation: portrait) {
/* 豎屏樣式 */
body {
transform: rotate(90deg);
transform-origin: 50% 50%;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: fixed;
top: 0;
left: 0;
}
}
@media screen and (orientation: landscape) {
/* 橫屏樣式 */
body {
width: 100vw;
height: 100vh;
}
}
</style>

上述代碼中的meta標簽是為了適配不同設備的屏幕大小和分辨率，確保頁面在不同設備上能夠正常展示。同時，我們在樣式表中使用了媒體查詢來設置不同方向的樣式。

當屏幕方向為豎屏時，我們需要將頁面進行旋轉，這里使用了transform屬性來實現。同時，我們也需要設置寬度和高度，將寬高比例翻轉，使得頁面能夠填滿整個屏幕。最后，我們還需要禁用橫向滾動條，以免影響用戶體驗。

當屏幕方向為橫屏時，我們只需要設置寬度和高度即可，這樣頁面就能夠充滿整個屏幕。

通過上述代碼，我們就可以輕松地實現移動設備屏幕橫屏的效果了。