移動端常見的一些問題

2022-08-14 07:00:12 字數 1909 閱讀 7091

安卓瀏覽器看背景,有些裝置會模糊

因為手機解析度太小,如果按照解析度來顯示網頁,字會非常小,安卓手機devicepixoradio比較亂,有1.5的,有2的也有3的。想讓在手機裡顯示更為清晰,必須使用2x的背景圖來代替img標籤(一般情況下都是2倍的),或者指定background-size:contain;都可以

2.防止手機中頁面放大和縮小

3.上下拉動滾動條時卡頓、慢

body

android3+和iosi5+支援css3的新屬性為overflow-scrolling

4.長時間按住頁面出現閃退

element

5.iphone及ipad下輸入框缺省內陰影

element

設定alpha值為0就可以去除本透明灰色遮罩,備註:transparent的屬性值在android下無效。

7.active相容處理 即 偽類:active失效

方法一:body新增ontouchstart

方法二:js給document繫結touchstart或touchend事件

bar8.1px邊框

在移動端中,如果給元素設定乙個畫素的邊框的話,那麼在手機上看起來是會比乙個畫素粗的。

解決方法:使用偽類元素模擬邊框,使用transform縮放

.a::after

9.webkit mask相容處理

某些低端手機不支援css3mask,可以選擇性的進降級處理

比如可以使用js判斷來引用不同class:

if('webkitmask' in documnet.documentelement.style)else

10.旋轉螢幕是,字型大小調整的問題

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6

11.transiton閃屏

//設定內聯的元素在3d空間如何呈現:保留3d-webkit-transform-style:preserve-3d;//設定進行轉換的元素的背面在面對使用者時是否課件:隱藏-webkit-backface-visibility:hidden;

12.圓角bug

某些android手機圓角失效 background-clip:padding-box;

13.click的300ms延遲問題

在移動端中,click事件是生效的,但是,點選之後會有300ms的延遲響應

原因:safari是最早做出這個機制的,因為在移動端裡,瀏覽器需要等待一段時間來判斷此次使用者操作是單擊還是雙擊,所以就有click300ms的延遲機制,android也很快就有了

不用click,用自定義事件tap

tap是需要自定義的:如果使用者執行了touchstart在很短的時間又觸發了touchend,且兩次的距離很小,而且不能

引入fastclick庫來解決

14.響應式

在移動端中,的處理應該是很謹慎的,假設有一張本身的尺寸是x寬,設定和包裹它的div一樣寬,如果是div寬度小於寬度沒有問題,但是如果div寬度大於的寬度,被拉伸失真

例如:點頭事件測試

www.jb51.net

$('#haorooms').on('tap',function())

我們點選蒙層時div正常消失,但是當我們在a標籤上點選蒙層時,發現a鏈結被觸發,這就是所謂的點透事件。

原因:touchstart早於touchend早於click。即click的觸發是由延遲的,這個時間大概在300ms左右,也就是說我們tap觸發之後蒙層隱藏。此時click還沒有觸發,300ms之後由於蒙層隱藏,我們的click觸發到了下面的a鏈結。

1.盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)

2.用fastclick

3.用preventdefault阻止a標籤的click

4.延遲一定的事件(300ms+)來處理事件(不推薦)

移動端開發的一些問題

解惑好文 移動端h5頁面高畫質多屏適配方案 對比了下文章和公司目前狀況,關於清晰度這一點,公司沒有這方面的要求,我們也沒有做這麼複雜,所有一律用 2x。我確實已經遭遇過好幾次還原度不高的問題,一度覺得很費解,我實話我真的看不出來還原度有多麼的不高。dpr在移動端開發中應該是需要特別注意的一點,dpr...

iOS 常見一些問題

1,使用autolayout時,用程式設計方式push乙個新的controller時,如果該controller需要隱藏tab bar時會出現檢視先出現,然後tabbar被隱藏而試圖被拉伸時出現乙個非預期的動畫效果的情況。解決方案 解決方法看這裡。大神提供的方法有效,但是在xcode7下會發現,無法...

webpart 常見的一些問題

1.此頁不支援指定的顯示模式。請確保已啟用個性化設定並且此頁上存在相應的區域 這個問題很奇怪,我很納悶,cs 無問題,webconfig裡面也寫了,那麼為什麼報錯?結果再我拖了相關的catalogzone和editorzone後解決.頁面上沒有catalogzone和editorzone,是不可以w...