h5 iphonex適配方案,原理是找到iphone x螢幕高度，用**查詢控制html加上頭部，底部的區間，避開異性區域。
less
@media only screen and (device-width: 375px) and (device-height: 812px) and(-webkit-device-pixel-ratio: 3) }
/*增加底部適配層
*/.has-bottombar }
/*導航操作欄上移
>遊戲中心
title
>
head
>
<
body
class
="body-index "
ontouchstart
="">
<
ul class
="ui-tiled bottom-menu bottom-menu-fixed"
>
<
li class
="">
<
i class
="gc-icon-normal gc-icon-find"
>
i>
<
div
class
="txt"
>遊戲
div>
li>
<
li class
="">
<
i class
="gc-icon-normal gc-icon-live"
>
i>
<
div
class
="txt"
>直播
div>
li>
<
li class
="">
<
i class
="gc-icon-normal gc-icon-compete"
>
i>
<
div
class
="txt"
>賽事
div>
li>
<
li class
="">
<
i class
="gc-icon-normal gc-icon-original"
>
i>
<
div
class
="txt"
>電競圈
div>
li>
<
li class
="marker"
>
li>
ul>
body
>
html
>
iPhoneX 序列適配方案 小結
和往常一樣，蘋果發布新產品，我們作為開發者都需要對系統和ui布局進行適配，今年也是一樣。從去年發布的 iphonex開始，iphone 手機加入了劉海設計，而且針對於iphone的劉海，需要特殊的適配。今年新出的3款iphone都帶有劉海，自然也不例外。在iphonex以前iphone的頂部gxqc...
h5移動端適配方案
flex布局 flex布局，不使用rem，直接使用px。doctype html html head title title style 利用flex屬性，可以實現塊級元素1 1 1 簡單的就能使裡面的內容居中 尤其是垂直居中，好用到爆 box item1 item2 item3 style hea...
關於H5移動端開發 iPhone X適配
一 查詢 media screen and device width 375px and device height 812px mui content 二 ios11 新增特性，蘋果公司為了適配 iphonex 對現有 viewport meta 標籤的乙個擴充套件，用於設定網頁在可視視窗的布局方...