我構(gòu)建了一個(gè)具有全屏功能的網(wǎng)頁(yè)。我使用了所有正確的 CSS 屬性來(lái)確保我的漸變背景完全覆蓋屏幕,事實(shí)確實(shí)如此。但是,當(dāng)我在 Chrome 中單擊網(wǎng)站上的全屏按鈕時(shí),頁(yè)面會(huì)變?yōu)槿?,但背景?huì)變成黑色。我到處都找遍了,還是沒(méi)發(fā)現(xiàn)什么問(wèn)題。iPadOS 似乎運(yùn)行良好。CSS 如下,其余代碼位于我的GitHub 存儲(chǔ)庫(kù)中。任何幫助深表感謝!CSS:@import url('https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap');* { margin: 0; padding: 0;}html { scroll-behavior: smooth;}body { padding-bottom: 50vh; background: -moz-linear-gradient(top, #19c9ff 0%, #d504f9 100%); background: -webkit-linear-gradient(top, #19c9ff 0%,#d504f9 100%); background: linear-gradient(to bottom, #19c9ff 0%,#d504f9 100%); background-repeat: no-repeat; background-size: contain; text-align: center; font-family: 'Sen', serif;}.nav { background-color: rgba(0, 0, 0, 0.5); padding: 10px; position: fixed; width: 100%;}.full { color: white; position: fixed; right: 20px; top: 12px; font-size: 1.34em;}.auto { color: white; position: fixed; left: 20px; top: 12px; font-size: 1.34em;}.logo { max-width: 200px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50vw;}p { color: white;}#pis { margin-top: 33vh;}h1 { color: white;}.micah-box i { font-size: 2em !important; color: rgba(0, 0, 0, 0.25); transition: 0.3s;}.micah-box { position: fixed; bottom: 15px; left: 15px; transition: 0.35s;}.micah:hover { color: white;}.micah-box h2 { font-size: 0.8em; float: right; margin-left: 10px; background-color: rgba(0, 0, 0, 0.25); padding: 9px; border-radius: 3px; color: rgba(225, 225, 225, 0.3); transition: 0.3s;}.micah-box h2:hover { background-color: white; color: black;}
1 回答

慕勒3428872
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊
你的全屏 Javascript 有點(diǎn)錯(cuò)誤。
body.requestFullscreen();
您在這里所說(shuō)的是全屏主體元素,而不是整個(gè)頁(yè)面。
相反嘗試->
document.documentElement.requestFullscreen()
- 1 回答
- 0 關(guān)注
- 202 瀏覽
添加回答
舉報(bào)
0/150
提交
取消