禁止頁面縮放，輸入框聚焦縮放
content
="yes"
name
=>
name
="viewport"
content
="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"
>
viewport-fit必須設定成cover，constant、env函式才會生效，擁有四個屬性
constant(safe-area-inset-top)
constant(safe-area-inset-left)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
name
="viewport"
content
="viewport-fit=cover"
>
@supports (
bottom
:env
(safe-area-inset-bottom)
) body
padding-bottom
:constant
(safe-area-inset-bottom)
;padding-bottom
:env
(safe-area-inset-bottom)
;
border-sizing
: content-box;
@supports (
bottom
:env
(safe-area-inset-bottom)
)btn-box
(容器選擇器)
padding-bottom
:constant
(safe-area-inset-bottom)
;padding-bottom
:env
(safe-area-inset-bottom)
;
適配android全面屏
隨著android手機的發展，手機螢幕已經從4 3,16 9,16 10發展到現如今的所謂的全面屏，比例一般為18 9，18.9 9,19 9。以三星s8為例，螢幕比例為18.5 9，從下圖可以看到，在 1080p 的解析度下，比標準的 16 9 螢幕，足足多了300畫素。開發者需要作一些優化，以充...
Android全面屏適配
概念 很多人可能把全面屏跟曲面屏混淆，其實這是兩個不同的概念。一般手機的螢幕縱橫比為16 9，如1080x1920 1440x2560等，其比值為1.777777 全面屏手機出現之前，android中預設的最大螢幕縱橫比 maximum aspect ratio 為1.86，即能夠相容16 9的螢幕...
前端iPhone劉海屏適配
對於iphone系列出的越來越多，如果只是使用 media來做適配的話，老 想要適配新機型還是有一定侷限性的。今天去搜了搜相關的解決方法，那麼就來總結一下。早期蘋果對於 iphone x 的設計布局意見如下 核心內容應該處於 safe area 確保不會被裝置圓角 corners 感測器外殼 sen...