css橫豎屏

有時候一些頁面希望在手機(jī)上可以實現(xiàn)橫屏的效果，比如播放頁面，這樣我們創(chuàng)建如下的css

.mobile-landscape-container {
  @media screen and (orientation: portrait) {
    position: absolute;
    width: 100vh;
    height: 100vw;
    top: 0;
    left: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 0% 0%;
  }
  @media screen and (orientation: landscape) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
}

然后為該頁面使用該css即可，這樣在手機(jī)上瀏覽會發(fā)現(xiàn)頁面處于橫屏效果，而且即使開啟了自動轉(zhuǎn)屏，轉(zhuǎn)屏后依然保持著橫屏效果。

注意使用這個樣式后，內(nèi)部的組件就不能使用vw和vh了，因為這兩個屬性被顛倒了，如果繼續(xù)使用會導(dǎo)致頁面結(jié)構(gòu)錯誤

但是有一個問題，就是如果將pc端瀏覽器縮小到高比寬大的情況下，頁面同樣會切換，效果不太好。所以可以判斷是否是手機(jī)，只在移動端設(shè)置該樣式。

有兩種方式可以實現(xiàn)：

• 通過vue的:class來判斷是否是手機(jī)，然后再添加該樣式即可。
• 通過css的max-device-width和max-device-height來判斷。

css判斷移動端

max-device-width和max-device-height與max-width和max-height，它們不受窗口大小的影響，就是設(shè)備屏幕的寬高，是固定值。而pc端分辨率起點是800x600，目前移動端的瀏覽器分辨率都不會超過這個值。

注意移動端的屏幕分辨率和瀏覽器分辨率是不一樣的，瀏覽器分辨率要小很多，因為目前手機(jī)的像素密度都大于1

所以我們可以通過max-device-width和max-device-height來判斷是否是手機(jī)端，比如：

/*定義豎屏 css*/
@media screen and (orientation:portrait) and (max-device-width:600px) and (max-device-height:800px) {
}
/*定義橫屏 css*/
@media screen and (orientation:landscape) and (max-device-width:800px) and (max-device-height:600px) {

這樣我們?yōu)樯厦娴臉邮郊由?code>max-device-width和max-device-height就可以使它只在移動端生效，不影響pc端。

html5橫屏

通過上面的方法實現(xiàn)強(qiáng)制橫屏效果，但是注意手機(jī)其實還是豎屏的狀態(tài)，這時候如果有輸入交互，那么鍵盤還是豎屏的。。。所以這僅僅適用于沒有鍵盤交互的頁面，比如視頻播放頁面。

那么有沒有什么辦法可以讓瀏覽器自己進(jìn)入橫屏狀態(tài)（就像APP中那樣），html5提供了一個API：

window.screen.orientation.lock("landscape-primary");

但是注意這個api必須在全屏狀態(tài)下才有效，也就是說需要在document.documentElement.requestFullscreen();或screenfull.toggle()后執(zhí)行lock函數(shù)。

同時因為全屏需要有用戶交互，所以最佳的方式就是一個全屏按鈕，點擊的時候全屏再切換橫屏即可。這樣鍵盤也是橫屏狀態(tài)下的鍵盤了。

但是注意：

• requestFullscreen在iOS上無效（screenfull也一樣），所以screen.orientation.lock在iOS上也沒有效果
• 雖然requestFullscreen在微信內(nèi)置瀏覽器中有效，但是screen.orientation.lock無效，也就是說能全屏但是無法橫屏。

到此這篇關(guān)于Vue實現(xiàn)手機(jī)橫屏效果的代碼示例的文章就介紹到這了,更多相關(guān)Vue手機(jī)橫屏效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論