iphoneX適配 客戶端H5頁面

2021-08-11 07:58:22 字數 1237 閱讀 8259

1、頂部通欄

之前的客戶端一直採用狀態列20pt+導航欄44pt的做法。由於iphonex多了一塊小劉海,因此iphonex單獨採用狀態列44pt+導航欄44pt,意味著內嵌的h5頁面整體下移24pt。

2、底部操作欄

由於iphonex是全面屏,頁面最底部會被彎曲的拐角截掉一部分,特別是有底部固定懸浮的tab條會嚴重受到影響。這時候需要底部留出一塊空白安全區域,頁面內容最終的底線應在手機拐角處。該安全區域的高度為34pt。

終上所述,結合iphonex目前特有的手機引數我們可以採用的適配方法為:

(1)meta標籤

ios11為了適配iphonex對現有的viewport meta標籤新增乙個特性:viewport-fit,如果客戶端沒有做全屏適配,那麼頁面想要全屏覆蓋,則可使用該特性:

"viewport" content="width=device-width,viewport-fit=cover">
(2)**查詢

1、利用constant函式

只有設定了viewport-fit=cover才能使用constant函式

@supports(bottom:constant(safe-area-inset-bottom)) 

}

2、利用iphonex獨特的型號引數

@media only screen and (device-width:

375px) and (device-height:

812px) and (-webkit-device-pixel-ratio:

3) }

(3)js判斷(以下採用jquery)

if($(window).width() === 375 && $(window).height() === 724 && window.devicepixelratio === 3)

}

(4)客戶端協議

也可以根據客戶端協議請求客戶端查詢是否是iphonex,以此來保持和客戶端一致。

4、引數解釋

以上**中的引數解釋如下:

以上引數均以標準的1pt=1px進行計算,如果h5頁面採用縮放的rem方式,那麼1pt = 1px * 3(iphonex解析度)

iphoneX 適配客戶端H5頁面的方法教程

前言 目前,很多app設計師小夥伴已經開始轉向h5前端開發啦,但是解決所有iphone和安卓機型的適配問題是我們的重中之重。無論是設計app還是寫前端h5.都是要考慮移動端的相容性。由於iphonex做了全面屏並且還保留一塊小劉海,因此很多以前的移動端h5頁面需要結合app客戶端做出相應的適配,具體...

關於H5移動端開發 iPhone X適配

一 查詢 media screen and device width 375px and device height 812px mui content 二 ios11 新增特性,蘋果公司為了適配 iphonex 對現有 viewport meta 標籤的乙個擴充套件,用於設定網頁在可視視窗的布局方...

H5頁面在iPhoneX劉海屏適配

iphone x和ios 11的發布,不僅在許多技術方面造成了一定的衝擊,前端也不可以避免地也受到影響,因為iphone x劉海的影響,在編寫前端頁面的時候要做一些處理,下面先提出一些新的概念。iphone x 無論是在螢幕尺寸 解析度 甚至是形狀上都發生了較大的改變,下面以iphone 8作為參照...