font

11月 30, 2016

CSS在 iOS上竟然長得跟原本的不一樣?各種iOS問題解法小整理

雖然切過的板已經不少,但是非常偶爾還是會出現那種:「電腦模擬手機畫面」跟「用iphone手機實際上看」長得不一樣的怪問題。沒錯,就唯獨iOS會有。發現原來是iOS對於CSS的語法默認值不太一樣。來提幾個剛好我遇上的問題解法:

1. iOS上觀看,若手指按住表格拖曳時,沒辦法繼續往下滑動
原則上這問題就是我上述說的iOS默認值不一樣的問題,
加一行就解掉:
-webkit-overflow-scrolling: touch;


2. iOS上圖與圖之間的間隔,明明都是同個CSS,電腦與手機上竟然長的不一樣
這問題我是莫名修好的,我猜是display默認值不一樣,
總之加個兩個東西就一致了:
display: inline-flex;/*for 所有瀏覽器*/
display: -webkit-box;/**for iOS /
display的各種值設定,事實上是有學問的呢,
各種語法瀏覽器支援程度是不同的,所以一定要注意啊,
這裡也有頁面特別整理出display在各個瀏覽器支援程度的表格:



最後,有網站把RWD各種裝置的語法都整理起來,
非常可以參考,順便分享:


Related Posts Plugin for WordPress, Blogger...

ShareThis