iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0
佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列 第 27

Day27:何謂全螢幕版面?

  • 分享至 

  • xImage
  •  

全螢幕版面(Full-screen Layout)
是指一個網頁或應用程式的設計,能夠在裝置的整個螢幕中展示內容,通常不顯示瀏覽器的工具列或系統導航列。這種版面設計讓應用程式或網頁占據所有可用的螢幕空間,提供更加沉浸式的體驗。

特點:
無瀏覽器框架:全螢幕模式下,不顯示標準的瀏覽器控制項,如網址列、標籤列、書籤列等。
最大化使用空間:無論是電腦螢幕、平板還是手機,全螢幕版面允許內容最大化顯示在視窗上,適合顯示大量圖片、影片或互動式內容。
應用場景:常見於遊戲、影片播放器、專業設計軟體、網頁展示和資料儀表板等。

使用方式:
瀏覽器全螢幕模式:使用者通常可以按 F11 或 Ctrl + Cmd + F(在 macOS 上)來進入全螢幕模式。
網頁設計:使用 CSS 和 JavaScript,可以讓網頁支援全螢幕顯示。例如,利用 JavaScript 的 requestFullscreen() 方法,可以讓特定元素(如影片或圖片)進入全螢幕模式。

document.getElementById("fullscreen-btn").addEventListener("click", function() {
    document.documentElement.requestFullscreen();
});

這段程式碼允許使用者點擊按鈕時,讓整個網頁進入全螢幕模式。


上一篇
Day26:整理常用的CSS屬性
下一篇
Day28:全網頁螢幕製作流程
系列文
HTML&CSS網頁設計學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言