1. H5全屏展示
最近燃前知需求悔笑中遇到關於全屏展示的需求，於是深入了解了一下demo如下所示？
MDN介紹：
使用提供的API，讓一個元素與其子元素，可以占據整個屏幕，並在此期間，從屏幕上隱藏所有的瀏覽器用戶界面以及其他應用。
chrome下的全屏表現：
全屏API：
總共用到6個API：
瀏覽器前綴：
目前並不是所有的瀏覽器都實現了API的無前綴版本，所以我們需要針對不同瀏覽器，做一下API的兼容:
1.1 屬性
1.1.1 瀏覽器是否支持全屏模式：document.fullscreenEnabled
document.fullscreenEnabled屬性返回一個布爾值，表示當前文檔是否可以切換到全屏狀態。
const fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
if (fullscreenEnabled) {
videoElement.requestFullScreen();
} else {
console.log('瀏覽器當前不能全屏');
}
1.1.2 返回全屏狀態的Element節點document.fullscreenElement
fullscreenElement屬性返回正處於全屏狀態的Element節點，如果當前沒有節點處於全屏狀態，則返回null
const fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
1.2 方法
1.2.1 使元素進入全屏模式：Element.requestFullscreen()
Fullscreen(domName) {
const element = document.querySelector(domName); // 獲取dom
const methodName =
this.prefixName === ''
? 'requestFullscreen'
: ${this.prefixName}RequestFullScreen ; // API前綴
element methodName ; // 調用全屏
}
值得注意的是：調用此API並不能保證元素一定能夠進入全屏模式
初始化直接全屏，會觸發進入全屏失敗回調。因為這皮消樣那就是容易造成欺騙，因為使用了全屏幕API，就會欺騙到人，被成功釣魚。 大概意思是這樣的
1.2.2 退出全屏：document.exitFullscreen()
document對象的exitFullscreen方法用於取消全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
exitFullscreen();
調用這個方法會讓文檔回退到上一個調用Element.requestFullscreen()方法進入全屏模式之前的狀態。
1.3 全屏事件
1.3.1 進入全屏/離開全屏，觸發事件：document.fullscreenchange
當我們進入全屏和離開全屏的時候，都會觸發一個 fullscreenchange 事件。
[MDN注意]：此事件不會提供任何信息，表明是進入全屏或退出全屏。
看了好久事件返回的信息，確實找不到一個值，表明這是在進入全屏，或者離開全屏！
可以說相當不人性化了！但我們可以通過檢查當前是否有節點處於全屏狀態，判斷當前是否處於全屏模式。
document.addEventListener("fullscreenchange", function( event ) {
if (document.fullscreenElement) {
console.log('進入全屏');
} else {
console.log('退出全屏');
}
});
1.3.2 無法進入全屏時觸發: document.fullscreenerror
瀏覽器無法進入全屏時觸發，可能是技術原因，也可能是用戶拒絕。
比如全屏請求不是在事件處理函數中調用,會在這里攔截到錯誤
screenError(enterErrorFn) {
const methodName = on${this.prefixName}fullscreenerror ;
document[methodName] = e => {
enterErrorFn && enterErrorFn(e)
};
}
1.4 全屏狀態的CSS
1.4.1 :full-screen偽類
全屏狀態下，大多數瀏覽器的CSS支持:full-screen偽類，只有IE11支持:fullscreen偽類。使用這個偽類，可以對全屏狀態設置單獨的CSS屬性。
/* 針對dom的全屏設置 /
.div:-webkit-full-screen {
background: #fff;
}
/ 全屏屬性 /
:-webkit-full-screen {}
:-moz-full-screen {}
:-ms-fullscreen {}
/ 全屏偽類 當前chrome:70 不支持 /
:full-screen {
}
:fullscreen {
/ IE11支持 */
}
1.4.2 :backdrop 偽元素
全屏模式的元素下的即刻渲染的盒子（並且在所有其他在堆中的層級更低的元素之上），可用來給下層文檔設置樣式或隱藏它
:not(:root):-webkit-full-screen::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: #999; // 會將背景設為灰色的 如果你沒為你的dom設置背景的話，全屏下會為灰色
}
:not(:root):-webkit-full-screen {
object-fit: contain;
position: fixed !important;
top: 0px !important;
right: 0px !important;
bottom: 0px !important;
left: 0px !important;
box-sizing: border-box !important;
min-width: 0px !important;
max-width: none !important;
min-height: 0px !important;
max-height: none !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
margin: 0px !important;
}
1.5 在項目中使用
由於我這個個項目用到的是Vue裡面用到了，它對各個方法和屬性做了很好的兼容，在開發中可以作參考。 用法很簡單，導入庫，就可以直接這樣調用方法：
fscreen.requestFullscreen(element)
// replacement for: element.requestFullscreen - without calling the function
// mapped to: element.vendorMappedRequestFullscreen
我項目中js使用如下所示
import fscreen from "fscreen";
import Message from "@/components/Message";
export default {
name: "FullScreen",
components: {},
data() {
return {
isFullscreen: false
};
},
computed: {
fullscreenEnabled() {
return fscreen.fullscreenEnabled;
},
},
methods: {
onTriggerClick(e) {
if (this.isFullscreen) {
this.onExitFullsreen();
} else {
this.requestFullscreen(document.querySelector(".fullscreen-content"));
}
this.isFullscreen = !this.isFullscreen;
},
},
mounted() {
fscreen.addEventListener("fullscreenchange", e => {
Message.info(this.isFullscreen ? "進入全屏" : "退出全屏");
console.log(e);
});
}
};
2. 電腦看網頁無法全屏怎麼辦
1. 電腦看視頻為什麼不能全屏
電腦看視頻不能全屏是與視頻源的比例有關系，在播放時雙擊或點菜單的全屏項使畫面全屏，再將滑鼠移到最上端會出現一個選單，點最右邊的那個鋪滿就可以了。
視頻全屏播放以及縮放
1、要想實現視頻全屏播放，需要旋轉iamgeview，使用autolayout使旋轉變得相當容易，iamgeview加約束，將寬度約束和高度約束分別拖線到controller;
2、然後設置寬度約束為屏幕高度，高度約束為屏幕寬度，以便旋轉之後，imageview能夠全屏顯示；
3、到這一步就可以輕松實現視頻全屏播放了，transform屬性和autolayout完美結合；
4、下一步就是完成imageview的縮放，使用UIPinchGestureRecognizer。
5、後續還要解決圖片的移動問題。
2. 用電腦看視頻不能全屏 看的很不舒服怎麼弄啊
看在線視頻時最容易出現死機、藍屏、花屏、重啟、自動關機、或你說的不能全屏看稿咐虛，請你謹慎操作。
下載谷歌等瀏覽器測試一下，如果好用，看視頻、或瀏覽其它網頁時就用這個軟體，這些都是不用IE做內核的，與你用IE不沖突（最主要是瀏覽器不好用引起的，我是從實踐中從多個瀏覽器中挑出來的，這個瀏覽器很著名，因為不容易崩潰，因為每個網頁出問題不會影響整個瀏覽器，有問題請你追問我）。
另外還要注意在看的時候不要同時在干其他操作，如果是某網站本身的問題就換個時間段在看。
如果看的時間太長也容易出問題，自己的經驗是，看一段時間重啟一下電腦在接著看就沒事了。
如果是用軟體平台看在線視頻更容易出現問題，沒有更好的方法，如果是軟體平台不好用就換換，換個時間段，在看的時候，不要在做其它操作，總之謹慎點操作。
如果是因為硬體引起鍵燃的，一般是內存小、CPU溫度高、網速慢等引起的，但是這不是主要的問題，主要是瀏覽器不好用，看簡察視頻的同時還在做其他操作等。
3. 紅旗h5播放視頻怎麼才能全屏
在中控屏右上方點擊最大化即可實現全。
或者在下方設置里選擇全屏即可。首先是要去點擊一鍵啟動按鈕，啟動車輛發動機，否則無法調整。之後點擊中控扶手搏神處的操作板上的菜單按鍵，進入菜單設置。之基沒虧後再點擊中控扶手上的OPTION設置按鍵。察敗
4. 如何處理h5游戲全屏的問題
那是顯卡中的設置問題~~~~
在顯冊仔游卡圖形屬性中的州銷「縮放」選項中選擇「縮放全屏」（原戚顫來的應該是「保持
縱橫比」）！確定退出~就ok了
5. html5怎麼讓網頁打開自動全屏就是充滿電腦整個顯示屏。
視頻播放後自動全屏
示例代碼：
<video controls src="" width="寬度" height="高度" onplaying="width='適合屏幕的寬度';height='適合屏幕的高度'">
6. 如何處理h5游戲全屏的問題
首先檢查銷顫顯卡解析度設置與游戲是否一致；如果一直，請按"WIN+R"兆雹調出運行窗口,輸入regedit回車，啟動注冊表，找到到HKEY_LOCAL_MACHINE------SYSTEM------ControlSet001-------Control-------GraphicsDrivers-------Configuration
然後右鍵點擊族斗帆Configuration，選擇查找，輸入Scaling，在右框內即可看到scaling，右鍵scaling選擇修改，將數值改為3，原值為4。注銷電腦即可。
7. HTML5播放器怎麼雙擊全屏
requestFullScreen。這是html5裡面一個比較新的API。不同瀏覽器存在不同的方法前綴。需要區分。
可以對整個document進行全屏，或對某個元素全屏（比如vidio控制項）
通常瀏覽埋首器都會預先進行詢問，比如彈出浮層讓用戶確認是否要全屏。只有用戶確認全屏，你的全屏操作才會生效。
8. HTML5網頁如何在電腦端和手機端都全屏顯示
HTML5網頁在電腦端和手機端都全屏顯示的步驟如下：
1、打開HTML5網頁代碼。燃搭
2、在網頁頭部加上新代碼，讓網頁的寬度自適悔帶應設備的皮前拿寬度。代碼如下：
<meta name="viewport" content="width=device-width
initial-scale=1.0
maximum-scale=1.0
minimum-scale=1.0
user-scalable=no" />
3、在輸入代碼完成後，把圖片包括圖片DIV 的寬度設置成百分之百即可。
9. 極米h5怎麼全屏播放
1、先恢巧拿復梯形校正到初始狀態，配寬賣然後確認畫面是否覆蓋到整個幕布，沒有的話調整投影儀，使畫面充滿全屏。
2、最後選擇精確調整，依次對四個角調整至幕布的邊角，此外，在播放視頻時由於視頻比例多樣也可能出現不能滿培逗屏現象，可進入視頻設置-畫面比例，設置為滿屏。