iPhoneX樣式適配相容問題

2021-10-13 12:38:04 字數 1011 閱讀 6180

問題出處:在我們進行定位時要距離底部tab 100px 在安卓手機距離底部達到了我們的預期效果 但蘋果手機沒有 這時候我們就要寫一下樣式的適配

1、網頁在可視視窗的布局方式

viweport-fit 屬性: ios11 新增特性,蘋果公司為了適配 iphonex 對現有 viewport meta 標籤的乙個擴充套件,用於設定網頁在可視視窗的布局方式,可設定三個值:

name

="viewport"

content

="width=device-width, viewport-fit=cover"

>

2、css3中css3條件判斷@supports加上env() 和 constant()ios11新增特性配合使用

viewport-fit-descriptor

@supports

列如:

&__icon-im 

// 相容iphone x底部

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

(bottom: env(safe-area-inset-bottom))

}

// 相容iphone x劉海屏

@supports (padding-top: constant(safe-area-inset-bottom)) or

(padding-top: env(safe-area-inset-bottom))

}// padding-top: constant(safe-area-inset-top); 為導航欄+狀態列的高度 88px

// padding-bottom: constant(safe-area-inset-bottom);為底下圓弧的高度34px

IOS與安卓樣式相容問題

1.margin在ios中失效 在頁面中元素使用margin值,在某些ios裝置下會出現失效的情況,而安卓機則正常顯示,此問題暫無直接的解決方案,當前使用空div控制間距。2.fixed定位問題 整個頁面的fixed定位,在ios下下拉會觸發下拉事件,但是沒有動畫效果。android就能正常執行 f...

div css(Firefox hr 相容問題)

firefox hr 相容問題,在ie中正常顯示的hr屬性設定,在firefox裡面不管怎麼弄都是不出來,最後看到一篇文章說ff中必須設定背景顏色才有效果的,這種問題自己閉門造車的話整上個三天三夜都找不到解決辦法啊!把 貼出來分享下 hr imghrcontent 通常我們都會定義 hr 的顯示外觀...

object c c 相容問題

今天在把在另乙個工程的object c 的類移植過來,原來沒問題的類,竟然在類宣告的地方出現編譯異常 remoteplayer.h 55 error expected asm or attribute before remoteplayer 以為是編譯器的設定有問題,折騰了半天才發現,原來是乙個小問...