前端開發規範(七、移動端優化)

前端開發規範(七、移動端優化)

前端開發規範(七、移動端優化)

移動端優化

click 的 300ms 延遲響應

click 的 300ms 延遲是由雙擊縮放(double tap to zoom)所導致的,由於用戶可以進行雙擊縮放或者雙擊滾動的操作,當用戶一次點擊屏幕之後,瀏覽器並不能立刻判斷用戶是確實要打開這個鏈接,還是想要進行雙擊操作。因此,移動端瀏覽器就等待 300 毫秒,以判斷用戶是否再次點擊了屏幕。

隨著響應式網頁逐漸增多,用戶使用雙擊縮放機會減少,這 300ms 的延遲就更不可接受了。瀏覽器開發商也隨之提供相應的解決方案。這些方案在5 Ways to Prevent the 300ms Click Delay on Mobile Devices 中,被提及的包括“禁用縮放”和“width=device-width”等方案,但這些方案並不完美,需要針對某些版本瀏覽器,又或僅在 Android 的瀏覽器上使用。

所以這時候就需要一個更簡單通用的解決方案,其中 FT Labs 專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫 FastClick 就是很好的選擇。FastClick 在檢測到 touchend 事件的時候,會通過 DOM 自定義事件立即觸發一個模擬 click 事件,並把瀏覽器在 300 毫秒之後真正觸發的 click 事件阻止掉。

FastClick 的使用方法非常簡單,在 window load 事件之後,在

上調用FastClick.attach() 即可。
前端開發規範(七、移動端優化)

快速回彈滾動

快速回彈滾動在手機瀏覽器上的發展歷史:

早期的時候,移動端的瀏覽器都不支持非 body 元素的滾動條,所以一般都藉助 iScroll;

Android 3.0 / iOS 解決了非 body 元素的滾動問題,但滾動條不可見,同時 iOS 上只能通過2個手指進行滾動;

Android 4.0 解決了滾動條不可見及增加了快速回彈滾動效果,不過隨後這個特性又被移除;

iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果

如果想要為某個元素擁有 Native 般的滾動效果,可以這樣操作:

.element {

overflow: auto; / auto | scroll /

-webkit-overflow-scrolling: touch;

}

除了 iScroll 之外,還有一個更加強大的滾動插件 Swiper,支持 3D 和內置滾動條等。

設備檢測

前端開發規範(七、移動端優化)

獲取滾動條值

PC 端滾動條的值是通過 document.scrollTop 和 document.scrollLeft 獲得,但在 iOS 中並沒有滾動條的概念,所以僅能通過 windows.scroll 獲取,同時也能兼容 Android 。

前端開發規範(七、移動端優化)

清除輸入框內陰影

在 iOS 上,輸入框默認有內部陰影,但無法使用 box-shadow 來清除,如果不需要陰影,可以這樣操作:

前端開發規範(七、移動端優化)

Meta 相關

頁面窗口自動調整到設備寬度,並禁止用戶縮放頁面。

前端開發規範(七、移動端優化)

電話號碼識別

iOS Safari ( Android 或其他瀏覽器不會) 會自動識別看起來像電話號碼的數字,將其處理為電話號碼鏈接,比如:

7位數字,形如:1234567

帶括號及加號的數字,形如:(+86)123456789

雙連接線的數字,形如:00-00-00111

11位數字,形如:13800138000

前端開發規範(七、移動端優化)

郵箱地址的識別

在 Android ( iOS 不會)上,瀏覽器會自動識別看起來像郵箱地址的字符串,不論有你沒有加上郵箱鏈接,當你在這個字符串上長按,會彈出發郵件的提示。

前端開發規範(七、移動端優化)


分享到:


相關文章: