隨著移動設(shè)備的普及，越來越多的網(wǎng)站開始使用響應(yīng)式設(shè)計，以適應(yīng)不同屏幕尺寸的設(shè)備。在這個過程中，設(shè)置屏幕方向變得越來越重要。HTML5提供了多種方式來設(shè)置屏幕方向。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

使用meta標簽設(shè)置viewport的屬性可以控制頁面的視口大小和縮放。其中，width=device-width表示視口大小與設(shè)備寬度相等；initial-scale=1.0表示頁面初始縮放比例為1；minimum-scale和maximum-scale控制頁面最小和最大縮放比例；user-scalable=no禁止用戶縮放頁面。

<meta property="og:video:width" content="640">
<meta property="og:video:height" content="360">
<meta property="og:video:orientation" content="landscape">

在分享視頻時，可以使用Open Graph協(xié)議中的meta標簽設(shè)置視頻的寬高和方向。其中，og:video:width和og:video:height分別表示視頻的寬高，單位為像素；og:video:orientation表示視頻的方向，landscape表示橫向，portrait表示豎向。

<video src="http://example.com/video.mp4" width="640" height="360" preload="none" playsinline webkit-playsinline></video>

在使用HTML5的video標簽嵌入視頻時，可以通過屬性控制視頻的方向。其中，width和height分別表示視頻的寬高，單位為像素；preload表示視頻是否在頁面加載時自動加載，none表示不自動加載；playsinline和webkit-playsinline分別表示在IOS系統(tǒng)上是否允許內(nèi)聯(lián)播放視頻。