完结小说排行榜,君子以泽,盛世嫡妃凤轻小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

手機(jī)端Web開(kāi)發(fā)中遇到的那些問(wèn)題

retina 圖片兼容

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

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

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

 
 
  
  width: 200px; 
  
   
  
  height:300px;

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

而解決辦法也有很多.

使用 media query

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

 
 
  
  #myimage { 
  
      width: 400px; 
  
      height: 300px; 
  
      background: url(lo-res.jpg) 0 0 no-repeat; 
  
  } 
  
   
  
  // 這里主要針對(duì)的是 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); 
  
      } 
  
  } 
  
   
  
  // 如果你想針對(duì)蘋(píng)果的, 則可以直接使用: 
  
  @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)備兩份, 做一些價(jià)值特別低的工作.

使用 js 判斷

除了上面寫(xiě)冗余的 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. 這兩個(gè), 應(yīng)該是最適合的, 不過(guò), 在畫(huà)圖時(shí), 大多都是位圖的形式, 所以, 需要轉(zhuǎn)換為 SVG 和 fonts 來(lái)說(shuō), 難度有點(diǎn)大. 針對(duì)一些小的 logo 和 icon 來(lái)說(shuō), 還是沒(méi)太大的問(wèn)題的. 并且, 上述的兩種方式所占用的空間大小也是很小的.

手機(jī)基本情況

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

手機(jī)上的鍵盤(pán)

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

ios 的鍵盤(pán)

鍵盤(pán)的渲染有兩種方式:

如果 input 已經(jīng)在鍵盤(pán)的上方, 則只是會(huì)將控件向上推一點(diǎn), 推導(dǎo)鍵盤(pán)的上方.
如果 input 在鍵盤(pán)的下方,鍵盤(pán)會(huì)覆蓋該控件, 并將整個(gè)頁(yè)面向上推, 直到控件推到鍵盤(pán)上方為止.

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

android 的鍵盤(pán)

同樣,也有兩種情況.

***種沒(méi)問(wèn)題
第二種, 當(dāng) input 在鍵盤(pán)的下方, 會(huì)將整個(gè) document 的高度增加, 直到控件高度超過(guò)鍵盤(pán)高度為止.

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

軟盤(pán)類型

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

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

軟盤(pán)人工彈起

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

IOS

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

在 ios6 以后, 可以手動(dòng)添加一個(gè) autofocus 屬性即可.

Android

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

鍵盤(pán)的收起

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

頁(yè)面滾動(dòng)

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

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

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

flex 問(wèn)題

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

display: box
display: flexbox
display: flex

由于 Android 使用的是 Webkit 開(kāi)源內(nèi)核, 我們需要給 flex 加上 webkit 前綴, 來(lái)兼容低版本 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 問(wèn)題

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

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

touch 事件解析

300ms click 時(shí)延

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

即:

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

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

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

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

 
 
  
  html { 
  
   
  
      touch-action: manipulation; 
  
   
  
  }

不過(guò) FF 不支持.

click 點(diǎn)透

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

www.villainhr.com

此時(shí), model 是覆蓋在 a 標(biāo)簽上的. 當(dāng)點(diǎn)擊罩層, 罩層消失. (罩層綁定的是 tap 事件) 由于, click 事件有 300ms 時(shí)延, 所以, 此時(shí) a 標(biāo)簽的跳轉(zhuǎn)效果會(huì)觸發(fā). 解決辦法是:

設(shè)置罩層延時(shí)消失效果. 延時(shí)時(shí)間設(shè)置為 300ms+ 即可.
在 touchend 里面執(zhí)行 preventDefault()
使用插件禁止掉 click 事件, 轉(zhuǎn)而使用模擬的.

觸摸事件詳解

在手機(jī)上是沒(méi)有關(guān)于鼠標(biāo)的相關(guān)操作的, 比如 hover, mouseover, mousenter等等. 只有, 相關(guān)的 touch 事件.

touchstart 當(dāng)***根手指觸摸到屏幕時(shí), 觸發(fā).
touchmove 當(dāng)某一個(gè)手指在屏幕上移動(dòng)時(shí), 觸發(fā).
touchend 當(dāng)手指從屏幕上移開(kāi)時(shí), 觸發(fā).
touchcancel 當(dāng)手指觸控被打斷時(shí)觸發(fā). 具體有一下幾種.

。其他事件的發(fā)生打斷了 touch 事件. 比如, js 操作強(qiáng)制跳轉(zhuǎn)

。當(dāng)瀏覽器的 UI 覆蓋到當(dāng)前的 web 上

。觸摸的手指數(shù)超過(guò)了瀏覽器的支持?jǐn)?shù)量. 如果發(fā)生, 那么***根觸摸的手指會(huì)被取消

// 暫不支持下列兩個(gè)事件

touchenter 當(dāng)手指進(jìn)入指定元素
touchleave 當(dāng)手指移出指定元素

因?yàn)樵谟|發(fā) touch 事件時(shí), 不僅僅只是相關(guān)的 touch 事件會(huì)觸發(fā), 還會(huì)觸發(fā)相關(guān)的 mouse 和 click 事件. 所以, 如果 mouse 和 click 事件有影響時(shí), 則需要顯示的使用 event.preventDefault() 取消掉后面的觸發(fā)機(jī)制.

在每個(gè) touch 事件里面, 還會(huì)返回掛載到 event 上的屬性, 常用的有:

touches: 當(dāng)前屏幕上的屬性
targetTouches: 在指定 DOM 元素上的屬性
changedTouches: 返回觸發(fā)時(shí)間的相關(guān)手指數(shù). 比如, touchmove 事件中, 返回正在移動(dòng)的手指. 在 touchend 事件中, 返回移除的手指.

并且每一個(gè) touch 上面都會(huì)附帶相關(guān)的屬性.

identifier: 每一個(gè)手指***的 ID
target: 返回一開(kāi)始觸發(fā) touch 事件的 DOM 元素
screenX/Y: 返回相對(duì)于整個(gè)手機(jī)屏幕而言的位置.
pageX/Y: 返回相對(duì)于整個(gè)頁(yè)面的位置, 包括 scroll 的距離.
clientX/Y: 返回相對(duì)于瀏覽器 viewport 的位置. 不包含 scroll 的距離.
radiusX/Y: 返回手勢(shì)橢圓的長(zhǎng)軸和短軸的大小. 目前來(lái)說(shuō), 還不支持. 和 screenX/Y 有點(diǎn)類似.

touchmove 的坑

移動(dòng)而不滾動(dòng)

當(dāng)觸發(fā) touchmove 時(shí). 如果,不加限制的話, 往往會(huì)觸發(fā) scroll 的效果. 為了消除這樣的問(wèn)題, 只需要將默認(rèn)行為禁掉就 ok.

 
 
  
  document.body.addEventListener('touchmove', function(event) { 
  
    event.preventDefault(); 
  
  }, false);

不要將 touchmove 來(lái)用作渲染觸發(fā)

因?yàn)? touchmove 的機(jī)制是瀏覽器自身來(lái)決定的. 他觸發(fā)的次數(shù)是很有限的. 所以, 我們一般只是利用 touchmove 來(lái)獲得數(shù)據(jù), 而渲染則需要使用 requestAnimationFrame .

 
 
  
  var touches = [] 
  
  canvas.addEventListener('touchmove', function(event) { 
  
    touches = event.touches; 
  
  }, false); 
  
   
  
  // Setup a 60fps timer 
  
  timer = setInterval(function() { 
  
    renderTouches(touches); 
  
  }, 15);

媒體查詢

媒體查詢機(jī)制在 css2 里面就已經(jīng)提出來(lái). 比如, 針對(duì)打印機(jī)的:

不過(guò), 在 css3 中, 媒體查詢的機(jī)制得到了補(bǔ)充. 并且除了 IE8 以外, 其他瀏覽器或者說(shuō), 手機(jī)端都是支持的. 他主要的用途還是區(qū)分手機(jī)端,PC端, 屏幕的大小等.

屏幕大小

先看個(gè) demo:

設(shè)置當(dāng)屏幕的大小為 [641,800]之間時(shí), 才加載 ipad.css. 如果, 不符合, 瀏覽器會(huì)默認(rèn)忽略這個(gè) tag. 其中 only 這個(gè) flag 是非常重要的. 他主要作用就是告訴瀏覽器不符合則忽略的規(guī)則.

通過(guò), 屏幕的大小來(lái)判斷 mobile , pad , PC 是比較有用的.

meta 標(biāo)簽

meta 主要用來(lái)設(shè)置網(wǎng)頁(yè)的源信息, 比如, 縮放, 寬度等等. 最常用的就是手機(jī)端上的

 
 
  
  
  
  
width=device-width;  // 網(wǎng)頁(yè)初始寬度和設(shè)備寬度一致 
  
  initial-scale=1.0;  // 初始放大效果 
  
  maximum-scale=1.0;  // ***放大效果 
  
  user-scalable=no"   // 防止用戶縮放 
  
  name="viewport" />  
  
   
  
    //允許全屏模式瀏覽 
  
   //忽略將屏幕中的數(shù)字識(shí)別為電話號(hào)碼;

這里只是整理了一些皮毛, 有興趣的同學(xué),可以參考另外兩篇文章:

移動(dòng)web問(wèn)題小結(jié)
無(wú)線Web開(kāi)發(fā)經(jīng)驗(yàn)談

后面如果遇到些比較坑的問(wèn)題, 會(huì)及時(shí)更新的。

分享文章：手機(jī)端Web開(kāi)發(fā)中遇到的那些問(wèn)題
本文網(wǎng)址：http://fisionsoft.com.cn/article/djppjid.html

新聞中心

其他資訊