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

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

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

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

在分享視頻時(shí)，可以使用Open Graph協(xié)議中的meta標(biāo)簽設(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標(biāo)簽嵌入視頻時(shí)，可以通過(guò)屬性控制視頻的方向。其中，width和height分別表示視頻的寬高，單位為像素；preload表示視頻是否在頁(yè)面加載時(shí)自動(dòng)加載，none表示不自動(dòng)加載；playsinline和webkit-playsinline分別表示在IOS系統(tǒng)上是否允許內(nèi)聯(lián)播放視頻。