首先了解一下iphonex裝置基礎資訊，如下：
iphonex螢幕組成：上部齊劉海（44px）+ 安全區域（safe area）+ 底部手勢區域（34px）。
預設，頁面只顯示在「安全區域」中，導致螢幕頂部和底部看起來很彆扭，此時可以通過如下幾種方式進行適配：
1）：設定viewport-fit
viewport-fit可以取兩個值contain（預設）或 cover
viewport-fit=contain：頁面內容顯示在安全區域；
viewport-fit=cover：頁面內容顯示在整個螢幕；
通常需要設定 viewport-fit=cover，如下：
<
meta
name
="viewport
"content
="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,
viewport-fit=cover"
>
2）：**查詢
@media only screen and (device-width:
375px) and (device-height:
812px) and (-webkit-device-pixel-ratio:
3)
body
可能由於框架或外掛程式原因，有時候$(window).resize(...)不生效。
解決方案：使用 window.onresize = function () 即可。
問題描述：有些手機上，gif**附近會有閃爍現象；
經測試發現，手機卡頓越嚴重，閃爍越明顯，所以基本確定是由於手機卡頓造成的；
解決辦法：進可能減少gif**幀數量，或直接忽略這些卡頓的手機（通常是比較老的機型/系統）。
問題描述：ios手機上，網頁中可滾動區域滾動不流暢，手指滑動多少頁面就只滾動多少，沒有彈性效果
解決辦法：-webkit-overflow-scrolling : touch;
加上上面這段**即可。
ios 安卓前端相容性
1.日期相容性 2.input框聚焦，ios出現outline或者陰影，安卓顯示正常 input focus 3.關於flex布局 4.ios系統，會將數字當成 號碼，導致變色 將上面的 加入到標籤中 5.禁止安卓識別email 6.input 的placeholder屬性會使文字位置偏上 line...
移動端開發 安卓和ios相容性的那些坑以及解決方案
問題1 移動端專案要求是全屏滾動，用的是 fullpage，上下滾動時安卓正常，蘋果手機瀏覽器上下滾動時會出現底色問題 解決方案 document.body.addeventlistener touchmove function e 問題2 移動端用video標籤用蘋果手機在瀏覽器上開啟和安卓機上開...
ios 安卓前端相容性1
2.input框聚焦，ios出現outline或者陰影，安卓顯示正常input focus 3.關於flex布局 4.ios系統，會將數字當成 號碼，導致變色 將上面的 加入到標籤中 5.禁止安卓識別email 6.input 的placeholder屬性會使文字位置偏上line height 和i...