40條常見的移動端Web頁面問題解決方案

傾力總結40條常見的移動端Web頁面問題解決方案

2016-05-30 JavaScript

作者：佚名（本文作者可聯系我們補上署名）

1、安卓浏覽器看背景圖檔，有些裝置會模糊。

用同等比例的圖檔在PC機上很清楚，但是手機上很模糊，原因是什麼呢？

經過研究，是devicePixelRatio作怪，因為手機分辨率太小，如果按照分辨率來顯示網頁，這樣字會非常小，是以蘋果當初就把iPhone 4的960640分辨率，在網頁裡隻顯示了480320，這樣devicePixelRatio＝2。現在android比較亂，有1.5的，有2的也有3的。

想讓圖檔在手機裡顯示更為清晰，必須使用2x的背景圖來代替img标簽（一般情況都是用2倍）。例如一個div的寬高是100100，背景圖必須得200200，然後background-size:contain;，這樣顯示出來的圖檔就比較清晰了。

代碼如下：

background:url(../images/icon/all.png) no-repeat center center;

-webkit-background-size:50px 50px;

background-size: 50px 50px;display:inline-block; width:100%; height:50px;

或者指定 background-size:contain;都可以，大家試試！

2、圖檔加載

若您遇到圖檔加載很慢的問題，對這種情況，手機開發一般用canvas方法加載：

具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html

下面舉例說明一個canvas的例子：

• js動态加載圖檔和li 總共舉例17張圖檔！

  var total=17;

  var zWin=$(window);

  var render=function(){

  var padding=2;

  var winWidth=zWin.width();

  var picWidth=Math.floor((winWidth-padding*3)/4);

  var tmpl =”;

  for (var i=1;i<=totla;i++){

  var p=padding;

  var imgSrc=’img/’+i+’.jpg’;

  if(i%4==1){

  p=0;

  }

  tmpl +=’

• ‘;

  var imageObj = new Image();

  imageObj.index = i;

  imageObj.onload = function(){

  var cvs =$(‘#cvs_’+this.index)[0].getContext(‘2d’);

  cvs.width = this.width;

  cvs.height=this.height;

  cvs.drawImage(this,0,0);

  }

  imageObj.src=imgSrc;

  }

  }

  render();

  3、假如手機網站不用相容IE浏覽器，一般我們會使用zeptojs。

  zeptojs内置Touch events方法，具體可以看http://zeptojs.com/#Touch events

  看了一下zeptio新版的API，已經支援IE10以上浏覽器，對zeptojs可以選擇使用！

  4、防止手機中網頁放大和縮小。

  這點是最基本的，最為手機網站開發者來說應該都知道的，就是設定meta中的viewport

  還有就是，有些手機網站我們看到如下聲明：

  設定了DTD的方式是XHTML的寫法，假如我們頁面運用的是html5，可以不用設定DTD,直接聲明。

  使用viewport使頁面禁止縮放。 通常把user-scalable設定為0來關閉使用者對頁面視圖縮放的行為

  但是為了更好的相容，我們會使用完整的viewport設定。

  當然，user-scalable=0,有的人也寫成user-scalable=no，都可以的。

  5、apple-mobile-web-app-capable

  apple-mobile-web-app-capable是設定Web應用是否以全屏模式運作。

  文法：

  說明：

  如果content設定為yes，Web應用會以全屏模式運作，反之，則不會。content的預設值是no，表示正常顯示。你可以通過隻讀屬性window.navigator.standalone來确定網頁是否以全屏模式顯示。

  6、format-detection

  format-detection 啟動或禁用自動識别頁面中的電話号碼。

  文法：

  說明：

  預設情況下，裝置會自動識别任何可能是電話号碼的字元串。設定telephone=no可以禁用這項功能。

  7、html5調用安卓或者ios的撥号功能

  html5提供了自動調用撥号的标簽，隻要在a标簽的href中添加tel:就可以了。

  如下：

  10010

  8、html5GPS定位功能

  具體請看：http://www.w3school.com.cn/html5/html_5_geolocation.asp

  9、上下拉動滾動條時卡頓、慢

  body {

  -webkit-overflow-scrolling: touch;

  overflow-scrolling: touch;

  }

  10、禁止複制、選中文本

  Element {

  -webkit-user-select: none;

  -moz-user-select: none;

  -khtml-user-select: none;

  user-select: none;

  }

  解決移動裝置可選中頁面文本(視産品需要而定)

  11、長時間按住頁面出現閃退

  element {

  -webkit-touch-callout: none;

  }

  12、iphone及ipad下輸入框預設内陰影

  Element{

  -webkit-appearance: none;

  }

  13、ios和android下觸摸元素時出現半透明灰色遮罩

  Element {

  -webkit-tap-highlight-color:rgba(255,255,255,0)

  }

  14、active相容處理 即 僞類 :active 失效

  方法一：body添加ontouchstart

  方法二：js給 document 綁定 touchstart 或 touchend 事件

  a {

  color: #000;

  }

  a:active {

  color: #fff;

  }

  bar

  document.addEventListener('touchstart',function(){},false);

  15、動畫定義3D啟用硬體加速

  Element {

  -webkit-transform:translate3d(0, 0, 0)

  transform: translate3d(0, 0, 0);

  }

  16、Retina屏的1px邊框

  具體請百度谷歌關鍵字，解決方案有很多

  17、webkit mask 相容處理

  某些低端手機不支援css3 mask，可以選擇性的降級處理。

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

  if( ‘WebkitMask’ in document.documentElement.style){

  alert(‘支援mask’);

  } else {

  alert(‘不支援mask’);

  }

  18、旋轉螢幕時，字型大小調整的問題

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

  -webkit-text-size-adjust:100%;

  }

  19、transition閃屏

  /設定内嵌的元素在 3D 空間如何呈現：保留3D /

  -webkit-transform-style: preserve-3d;

  / 設定進行轉換的元素的背面在面對使用者時是否可見：隐藏 /

  -webkit-backface-visibility:hidden;

  20、圓角bug

  某些Android手機圓角失效

  background-clip: padding-box;

  21、頂部狀态欄背景色

  說明：

  除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個meta标簽不會起任何作用。

  如果content設定為default，則狀态欄正常顯示。如果設定為blank，則狀态欄會有一個黑色的背景。如果設定為blank-translucent，則狀态欄顯示為黑色半透明。

  如果設定為default或blank，則頁面顯示在狀态欄的下方，即狀态欄占據上方部分，頁面占據下方部分，二者沒有遮擋對方或被遮擋。

  如果設定為blank-translucent，則頁面會充滿螢幕，其中頁面頂部會被狀态欄遮蓋住（會覆寫頁面20px高度，而iphone4和itouch4的Retina螢幕為40px）。

  預設值是default。

  22、設定緩存

  手機頁面通常在第一次加載後會進行緩存，然後每次重新整理會使用緩存而不是去重新向伺服器發送請求。如果不希望使用緩存可以設定no-cache。

  23、桌面圖示

  iOS下針對不同裝置定義不同的桌面圖示。如果不定義則以目前螢幕截圖作為圖示。

  上面的寫法可能大家會覺得會有預設光澤，下面這種設定方法可以去掉光澤效果，還原設計圖的效果！

  圖檔尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px)

  24、啟動畫面

  iOS下頁面啟動加載時顯示的畫面圖檔，避免加載時的白屏。

  可以通過madia來指定不同的大小：

  Search::-webkit-search-cancel-button{

  display: none;

  }

  如果想使用原生close按鈕，又想使其符合設計風格，可以對這個僞元素的樣式進行修改。

  40、喚起select的option展開

  zepto方式:

  $(sltElement).trrgger(“mousedown”);

  原生js方式:

  function showDropdown(sltElement) {

  var event;

  event = document.createEvent(‘MouseEvents’);

  event.initMouseEvent(‘mousedown’, true, true, window);

  sltElement.dispatchEvent(event);

  };

  原文位址：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=23&srcid=0619deajtWecx8GEb1WKwIag#rd