問題出處:在我們進行定位時要距離底部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 以為是編譯器的設定有問題,折騰了半天才發現,原來是乙個小問...