本篇文章給大家分享的是有關(guān)手機(jī)端Web開發(fā)中遇到的問題有哪些，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

白塔ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

 retina 圖片兼容

這個 feature 應(yīng)該不僅僅只關(guān)心 手機(jī)端, 而且還包括PC, 因?yàn)樘O果不僅僅在手機(jī)端 (從 iphone4 開始), 而且在, MAC 上也使用了  retina. 首先, retina 的意思就是, dpr(device-pixel-ratio)是普通屏幕的兩倍. 對比于 CSS 來說就是, 原來在 css  中設(shè)置的是 1px , 在實(shí)際的屏幕顯示時, 也是 1px. 但是, 在 retina 下, css 的 1px 就是實(shí)際屏幕的 2px.

這樣的結(jié)果就是:

有同學(xué)會想, 會啥會這樣呢? 命名看起來大小一樣的, 為什么圖片變模糊了?這實(shí)際上是位圖的特性. 比如一個 jpg 文件, 大小是 200×300.  那么他的實(shí)際屏幕像素就是 200px × 300px. 放在 dpr=1 的屏幕中, 大小設(shè)置為:

width: 200px;  height:300px;

這樣, 當(dāng)然可以正常顯示. 但在 retina 中, 每個 css px 等于 2 倍的 px. 這樣, 原來正常顯示的圖片就被放大了一倍.  原來圖片上每個點(diǎn),可以正好的放在 dpr=1 的屏幕中, 而在 dpr=2 時, 每個點(diǎn)都被拆分了, 所以就有鋸齒造成模糊的現(xiàn)象.

而解決辦法也有很多.

使用 media query

這種方法適用于背景圖的添加. 使用到的是 css3 提供的 device-pixel-ratio query 來進(jìn)行執(zhí)行. 簡單的demo就是:

#myimage {     width: 400px;     height: 300px;     background: url(lo-res.jpg) 0 0 no-repeat; }  // 這里主要針對的是 Android 的一些設(shè)備 @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio: 1.5), screen and (-o-min-device-pixel-ratio: 3/2), screen and (min-device-pixel-ratio: 1.5) {     #myimage {         background-image: url(hi-res.jpg);     } }  // 如果你想針對蘋果的, 則可以直接使用: @media only screen and (-webkit-device-pixel-ratio: 2),        only screen and (-moz-device-pixel-ratio: 2),        only screen and (-o-device-pixel-ratio: 2/1),        only screen and (device-pixel-ratio: 2) {         #myimage {         background-image: url(hi-res.jpg);     } }

但這樣成本很大, 而且每次都需要準(zhǔn)備兩份, 做一些價值特別低的工作.

使用 js 判斷

除了上面寫冗余的 css 代碼外, 還可以使用 js 進(jìn)行判斷. 然后,替換 data-src 里面的內(nèi)容進(jìn)行懶加載.

if (window.devicePixelRatio > 1) {         var images = $("img");         images.each(function(i) {             var x1 = $(this).attr('data-src');             $(this).attr('src',x1);         });     }

而且,該屬性的支持度挺高的, 基本上所有的手機(jī)端和PC 都支持, 除了 IE8.

使用矢量圖

在 web 中使用矢量圖的方式有很多. 比如, SVG, Fonts. 這兩個, 應(yīng)該是最適合的, 不過, 在畫圖時, 大多都是位圖的形式, 所以,  需要轉(zhuǎn)換為 SVG 和 fonts 來說, 難度有點(diǎn)大. 針對一些小的 logo 和 icon 來說, 還是沒太大的問題的. 并且,  上述的兩種方式所占用的空間大小也是很小的.

手機(jī)基本情況

現(xiàn)在手機(jī)的問題不在 js 腳本, 而在頁面渲染. 因?yàn)? 手機(jī)的屏幕顯示全是通過 CPU 進(jìn)行處理. 而沒有像 PC  端一樣有獨(dú)立的顯卡專門來對圖像進(jìn)行繪制.

手機(jī)上的鍵盤

一般遇到需要輸入的元素標(biāo)簽, 比如, input 當(dāng)獲取焦點(diǎn)時, 都會觸發(fā)鍵盤的彈出. 但, 對于 ios 和安卓,  這兩者的鍵盤彈出的處理方式不一樣.

ios 的鍵盤

鍵盤的渲染有兩種方式:

• 如果 input 已經(jīng)在鍵盤的上方, 則只是會將控件向上推一點(diǎn), 推導(dǎo)鍵盤的上方.

• 如果 input 在鍵盤的下方,鍵盤會覆蓋該控件, 并將整個頁面向上推, 直到控件推到鍵盤上方為止.

另外, 當(dāng)在 ios7 一下時, 如果有元素是 fixed 屬性. 那么,此時打開 鍵盤時, fixed 有可能會當(dāng)做 absolute 進(jìn)行渲染.  所以, 這真是個問題.

android 的鍵盤

同樣,也有兩種情況.

• ***種沒問題

• 第二種, 當(dāng) input 在鍵盤的下方, 會將整個 document 的高度增加, 直到控件高度超過鍵盤高度為止.

對于 android 將整個 document 向上推的情況, 對于絕對定位和 fixed 屬性定位來說. 會存在一定的問題. 增加 document  并未增高 viewport 的位置, 所以, 如果使用 fixed 可能會出現(xiàn), 元素跑到鍵盤下面. 但, 由于鍵盤是在整個瀏覽器上方的, 所以,  你也不可能覆蓋掉鍵盤. 一般的解決辦法就是, 監(jiān)聽輸入的 focus 事件, 來動態(tài) 設(shè)置fixed 的位置.(不過好復(fù)雜).

軟盤類型

針對于不同的輸入,鍵盤上顯示的類型實(shí)際上是不一樣的, 一般兼容性比較好的是:數(shù)字/手機(jī)號. 可以設(shè)置為:

input[type=tel]  input[type=number]

軟盤人工彈起

當(dāng)用戶沒有觸發(fā) input 的 focus 事件. 而是開發(fā)者人工觸發(fā)的, 這里就有兩種不同的情況.

IOS

ios6 以前, 當(dāng)控件觸發(fā)了 focus 事件, 但, focus 不是用戶觸發(fā)的, 那么鍵盤是不會彈起的.

在 ios6 以后, 可以手動添加一個 autofocus 屬性即可.

Android

只要不是用戶觸發(fā)的,都不能彈起.

鍵盤的收起

鍵盤的收起直接觸發(fā) js 的 blur 事件即可.

頁面滾動

設(shè)計(jì)到頁面滾動有兩個事件, 一個是 scroll, 一個是 touchmove.

手機(jī)端為了解決性能問題, 當(dāng)頁面進(jìn)行滾動時, js 進(jìn)行的動態(tài)渲染是無效的, 即, 使用 js 改變頁面上元素的位置,是無效的. 知道頁面滾動結(jié)束才行.  這種效果主要體現(xiàn)在 scroll 事件觸發(fā)的機(jī)制上. 在 ios8 以下, 當(dāng)頁面滾動時, js 的渲染被暫停了. 而,對于 Andriod 4.0 以上來說,  scroll 觸發(fā)都是連續(xù)滾動的.

如果你想設(shè)置局部滾動, 可以添加 -webkit-overflow-scrolling: touch css 屬性.

flex 問題

由于歷史原因, 想在 web 上實(shí)現(xiàn) flex 的效果. 則需要注意他的兼容性, 因?yàn)?flex 有三個版本,  而且三個版本的支持性都不一樣.分別是:

• display: box

• display: flexbox

• display: flex

由于 Android 使用的是 Webkit 開源內(nèi)核, 我們需要給 flex 加上 webkit 前綴, 來兼容 低版本 Android.

display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;

目前的兼容性是:

• old 使用的是 display: box;

• tweener 使用的是 display: flexbox;

• new 使用的是 display: flex;

fixed 問題

在 mobile 里面使用 fixed 是一個比較復(fù)雜的問題. 因?yàn)?在輸入時, 往往還會設(shè)計(jì)到鍵盤的彈出, 鑒于 ios 和 android  的不同效果. fixed 有可能在鍵盤彈出時, 出現(xiàn)錯位的現(xiàn)象. 例如:

具體參考: fixed. 在 ios5 以前是不支持 fixed, android 在 4.x 之后, fixed 基本上才可用.

touch 事件解析

300ms click 時延

click 時延算是, web 手機(jī)開發(fā)的一個坑吧. 因?yàn)閺S商在設(shè)計(jì)手機(jī)端時, 主要, 考慮到縮放的事.

即:

當(dāng)***次點(diǎn)擊時, 并不會觸發(fā) click 時間, 瀏覽器會等待 300ms 時延, 并判斷你在 300ms 內(nèi),有沒有再次點(diǎn)擊, 如果有, 則會觸發(fā)  zoom in 的效果。 后來, 300ms 時延被取消了, 同時, 長按選中文本也取消了. 后來覺得不行, 又加上了. 在 Chrome 32+, IE/FF  都是 Ok的. 最近在 IOS 9.3 中也得到了修復(fù).

不過前期是, 你需要在 head 標(biāo)簽里面加上.

// 告訴瀏覽器取消雙擊放大的效果  

或者給特定的 tag 加上特定的 css 屬性

html {      touch-action: manipulation;  }

不過 FF 不支持.

click 點(diǎn)透

這個 feature 應(yīng)該算是比較經(jīng)典了. 當(dāng)一個罩層覆蓋在一個 a 標(biāo)簽上。