iphoneX的“劉海”為相機和其他組件留出了空間，同時在底部也留有可操作區域。那么網站邊尷尬了~被限制在了這樣的“安全區域”內，兩邊會出現一道白條。解決的方案是：1、給body添加一個background；2、添加viewport-fit=cover meta標簽，使頁面占滿整個屏幕 ...

在 ios 11 中我們可以使用 viewport-fit=cover + safe-area-inset-*。 那么是不是 ios11 以下就用不了這些了呢？是的，但你見過 iphone x+ 有 ios 11以下的嗎？ 所以我們可以愉快的搞下去。 開始之前我們先了解什么是 safe area ...

蘋果公司（Apple）的發布會也開完了，新產品也將登陸了。估計很多開發人員看到iPhone X的設備是要崩潰了，特別對於前端開發人員更是如此。 iPhone X的屏幕覆蓋了整個手機的屏幕，為相機和其他各部件留出了一個空間。結果是屏幕設計出現了一些尷尬的情況。比如將網站限制在一個“安全區 ...

默認劉海屏的webview是有安全區域的，加上viewport-fit=cover屬性后webview會全屏，全屏后為了適配劉海屏加上安全區域 padding-top: 1rem;//android樣式 padding: env(safe-area-inset-top ...

版本：2.3.4 一 豎屏手機適配 二 橫屏手機適配 三 其他（百分比適配，ShowAll模式，游戲常用分辨率） 一 豎屏手機適配 游戲場景Canvas分辨率640x1080， 選擇Fit Width ，Widget組件默認Top/Right/Bottom/Left都勾選 ...

版本：2.3.4 一 豎屏手機適配 二 橫屏手機適配 三 其他（百分比適配，ShowAll模式，游戲常用分辨率） 一 豎屏手機適配 游戲場景Canvas分辨率640x1080， 選擇Fit Width ，Widget組件默認Top ...

一、viewport視口 　　在移動端，viewport視口就是瀏覽器顯示頁面內容的屏幕區域。 　　viewport視口有兩種視口，分別是 visual viewport(可視視口)和layout viewport(布局視口)： 　　　　（1）visual viewport固定大小跟屏幕大小相同 ...

前言 場景：因為要做無 tabbar 頁面，所以在配置文件中取消底部導航欄。 取消后，iPhone X(劉海屏) 底部就出現如下圖所示白色安全區域問題：這個問題，是因為 uni-app 默認會為 iPhone X(劉海屏) 留出安全距離，這個 安全距離的背景色就是白色 ...