用CSS里的 viewport-fit 標簽應對iPhone X 的劉海
iPhone X 配備一個覆蓋整個手機的全面屏，頂部的“劉海”為相機和其他組件留出了空間。然而結果就是會出現一些尷尬的情景：網站被限制在一個“安全區域”，在兩側邊緣會出現白條兒。移除這個白條兒也不難，給 body 設置一個 background-color 就可以搞定 ...
原文：兼容iphone x劉海的正確姿勢
在 ios 中我們可以使用 viewport fit cover safe area inset 。 那么是不是 ios 以下就用不了這些了呢 是的，但你見過 iphone x 有 ios 以下的嗎 所以我們可以愉快的搞下去。 開始之前我們先了解什么是 safe area，簡單的來說就是除了劉海和胡子以外的區域為安全區域： 關於 viewport fit viewport fit 有 個值：con ...
2018-11-14 10:17 0 918 推薦指數：
相關推薦
HttpClient(4.5.x)正確的使用姿勢
前言: httpclient(4.5.x)默認是啟動連接池的, 其降低時耗(避免連接初3次握手, 以及關閉4次握手的消耗), 顯著提升高並發處理能力(大量減少time_wait), 確實扮演了重要的角色. 但是封裝httpclient, 需要了解不少細節, 還要根據業務合理配置參數 ...
兼容IE8的input輸入框的正確使用姿勢
input是一個很常見的標簽，大家使用的也很常見，但是我在具體的工作中發現要想完美的使用這個標簽還是任重而道遠，下面是我碰到的幾個問題。 1、我們在使用這個標簽的時候會習慣的加上placeholde ...
vue 劉海屏兼容組件
/* 無返回按鈕的標頭 */ <template> <div v-if="GLOBAL.evnType === GLOBAL.ENV_TY ...
IdentityServer4 4.x版本 配置Scope的正確姿勢
前言 IdentityServer4 是為ASP.NET Core系列量身打造的一款基於 OpenID Connect 和 OAuth 2.0 認證的框架 IdentityServer4 ...
關於 iphone H5劉海屏適配
默認劉海屏的webview是有安全區域的，加上viewport-fit=cover屬性后webview會全屏，全屏后為了適配劉海屏加上安全區域 padding-top: 1rem;//android樣式 padding: env(safe-area-inset-top ...
微信小程序iPhone X空白兼容
開局一張圖…… 看看這空白的地方多丑 ~ 接下來就是見證奇跡的時刻（上代碼） index.js中的代碼 wxss中的代碼 ...
React Native 調用 Web3（1.x） 的正確姿勢
安裝加密用包 安裝兼容工具 link ...