移動端頁面開發通用問題解決方案

一、使各個手機型號展現的css頁面相同的問題

　　解決方案：引入reset.css文件

 1 @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
 2 body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
 3 body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
 4 h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
 5 h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微軟雅黑",simsun,sans-serif}
 6 h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
 7 address,cite,dfn,em,i,optgroup,var{font-style:normal}
 8 table{border-collapse:collapse;border-spacing:0;text-align:left}
 9 caption,th{text-align:inherit}
10 ul,ol,menu{list-style:none}
11 fieldset,img{border:0}
12 img,object,input,textarea,button,select{vertical-align:middle}
13 article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
14 audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
15 blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
16 textarea{overflow:auto;resize:vertical}
17 input,textarea,button,select,a{outline:0 none;border: none;}
18 button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
19 mark{background-color:transparent}
20 a,ins,s,u,del{text-decoration:none}
21 sup,sub{vertical-align:baseline}
22 html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
23 body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
24 hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
25 a {color: #25a4bb;text-decoration: none;}

二、移動端1像素邊框問題

　　因爲移動端的屏幕的分辨率不一樣，比較好一點的手機屏幕的分辨率高，多是二倍屏或者是3倍屏，這樣的話，咱們寫border:1px solid black; 這樣的代碼，實際在這種高分辨率的屏幕上顯示的是2px或者3px。

　　解決方案：引入一個border.css文件，代碼以下：

  1 @charset "utf-8";
  2 .border,
  3 .border-top,
  4 .border-right,
  5 .border-bottom,
  6 .border-left,
  7 .border-topbottom,
  8 .border-rightleft,
  9 .border-topleft,
 10 .border-rightbottom,
 11 .border-topright,
 12 .border-bottomleft {
 13   position: relative;
 14 }
 15 .border::before,
 16 .border-top::before,
 17 .border-right::before,
 18 .border-bottom::before,
 19 .border-left::before,
 20 .border-topbottom::before,
 21 .border-topbottom::after,
 22 .border-rightleft::before,
 23 .border-rightleft::after,
 24 .border-topleft::before,
 25 .border-topleft::after,
 26 .border-rightbottom::before,
 27 .border-rightbottom::after,
 28 .border-topright::before,
 29 .border-topright::after,
 30 .border-bottomleft::before,
 31 .border-bottomleft::after {
 32   content: "\0020";
 33   overflow: hidden;
 34   position: absolute;
 35 }
 36 /* border
 37  * 因，邊框是由僞元素區域遮蓋在父級
 38  * 故，子級如有交互，須要對子級設置
 39  * 定位 及 z軸
 40  */
 41 .border::before {
 42   box-sizing: border-box;
 43   top: 0;
 44   left: 0;
 45   height: 100%;
 46   width: 100%;
 47   border: 1px solid #eaeaea;
 48   transform-origin: 0 0;
 49 }
 50 .border-top::before,
 51 .border-bottom::before,
 52 .border-topbottom::before,
 53 .border-topbottom::after,
 54 .border-topleft::before,
 55 .border-rightbottom::after,
 56 .border-topright::before,
 57 .border-bottomleft::before {
 58   left: 0;
 59   width: 100%;
 60   height: 1px;
 61 }
 62 .border-right::before,
 63 .border-left::before,
 64 .border-rightleft::before,
 65 .border-rightleft::after,
 66 .border-topleft::after,
 67 .border-rightbottom::before,
 68 .border-topright::after,
 69 .border-bottomleft::after {
 70   top: 0;
 71   width: 1px;
 72   height: 100%;
 73 }
 74 .border-top::before,
 75 .border-topbottom::before,
 76 .border-topleft::before,
 77 .border-topright::before {
 78   border-top: 1px solid #eaeaea;
 79   transform-origin: 0 0;
 80 }
 81 .border-right::before,
 82 .border-rightbottom::before,
 83 .border-rightleft::before,
 84 .border-topright::after {
 85   border-right: 1px solid #eaeaea;
 86   transform-origin: 100% 0;
 87 }
 88 .border-bottom::before,
 89 .border-topbottom::after,
 90 .border-rightbottom::after,
 91 .border-bottomleft::before {
 92   border-bottom: 1px solid #eaeaea;
 93   transform-origin: 0 100%;
 94 }
 95 .border-left::before,
 96 .border-topleft::after,
 97 .border-rightleft::after,
 98 .border-bottomleft::after {
 99   border-left: 1px solid #eaeaea;
100   transform-origin: 0 0;
101 }
102 .border-top::before,
103 .border-topbottom::before,
104 .border-topleft::before,
105 .border-topright::before {
106   top: 0;
107 }
108 .border-right::before,
109 .border-rightleft::after,
110 .border-rightbottom::before,
111 .border-topright::after {
112   right: 0;
113 }
114 .border-bottom::before,
115 .border-topbottom::after,
116 .border-rightbottom::after,
117 .border-bottomleft::after {
118   bottom: 0;
119 }
120 .border-left::before,
121 .border-rightleft::before,
122 .border-topleft::after,
123 .border-bottomleft::before {
124   left: 0;
125 }
126 @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
127   /* 默認值，無需重置 */
128 }
129 @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
130   .border::before {
131     width: 200%;
132     height: 200%;
133     transform: scale(.5);
134   }
135   .border-top::before,
136   .border-bottom::before,
137   .border-topbottom::before,
138   .border-topbottom::after,
139   .border-topleft::before,
140   .border-rightbottom::after,
141   .border-topright::before,
142   .border-bottomleft::before {
143     transform: scaleY(.5);
144   }
145   .border-right::before,
146   .border-left::before,
147   .border-rightleft::before,
148   .border-rightleft::after,
149   .border-topleft::after,
150   .border-rightbottom::before,
151   .border-topright::after,
152   .border-bottomleft::after {
153     transform: scaleX(.5);
154   }
155 }
156 @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
157   .border::before {
158     width: 300%;
159     height: 300%;
160     transform: scale(.33333);
161   }
162   .border-top::before,
163   .border-bottom::before,
164   .border-topbottom::before,
165   .border-topbottom::after,
166   .border-topleft::before,
167   .border-rightbottom::after,
168   .border-topright::before,
169   .border-bottomleft::before {
170     transform: scaleY(.33333);
171   }
172   .border-right::before,
173   .border-left::before,
174   .border-rightleft::before,
175   .border-rightleft::after,
176   .border-topleft::after,
177   .border-rightbottom::before,
178   .border-topright::after,
179   .border-bottomleft::after {
180     transform: scaleX(.33333);
181   }
182 }

三、移動端中點擊延遲的問題

　　在移動端的某些瀏覽器上點擊click會延遲300毫秒再執行

　　解決方案：

　　　　項目中安裝 fastclick 第三方的包安裝到項目依賴中：npm install fastclick --save  命令進行安裝。

　　移動端上touch事件有四個，其觸發順序爲： touchstart -> touchmove -> touchend -> touchcancel

　　注：對於某些 android 系統 touch 的 bug: 

　　好比手指在屏幕由上向下拖動頁面時，理論上是會觸發 一個 touchstart ，不少次 touchmove ，和最終的 touchend ，但是在android 4.0上，touchmove只被觸發一次，觸發時間和touchstart 差很少，而touchend直接沒有被觸發。這是一個很是嚴重的bug，在google Issue已有很多人提出 ,這個很蛋疼的bug是在模擬下拉刷新是遇到的尤爲當touchmove的dom節點數量變多時比出現，當時解決辦法就是用settimeout來稀釋touchmove。

四、<meta>元素

　　meta 標籤位於 head 標籤之間，是 HTML 語言的一個輔助性標籤，合理的設置在移動端中起着很是重要的做用。下面列舉幾個經常使用的用法：

　　

 1         // 強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽
 2         <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
 3 
 4         // 禁止百度SiteApp轉碼聲明
 5         <meta http-equiv="Cache-Control" content="no-siteapp">
 6 
 7         // 禁止自動識別電話和郵箱；
 8         <meta name="format-detection" content="telephone=no, email=no">
 9 
10         // 指定iphone中safari頂端的狀態條的樣式(default：白色；black：黑色；black-translucent ：半透明)；
11         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12 
13         // 添加到 IOS 主屏後的標題 
14         <meta name="apple-mobile-web-app-title" content="去哪">
15 
16         // 隱藏地址欄，啓用 WebApp 全屏模式
17         <meta name="apple-mobile-web-app-capable" content="yes">
18 
19        // 優先使用 IE 最新版本和 Chrome
20         <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
21 
22         // 註明做者
23         <meta name="author" content="www.jiawin.com">

 

五、font-family 字體選擇

　　iOS 4.0+ 使用英文字體 Helvetica Neue，以前的iOS版本降級使用 Helvetica。中文字體設置爲華文黑體STHeiTi（中文名稱叫黑體-簡）。設計時候通常用華文黑體來代替，二者差別微小。

body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

六、使用 rem 替代 em 單位

　　rem（root element，html）是 CSS3 新增的一個相對單位，相對於根目錄的 em 而不是相對於父元素，也就是說，它雖然是相對值，可是隻是相對於根目錄來講的（也就是 html），它不會隨着其它元素的改變而改變。經過它既能夠作到只修改根元素就成比例的調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。從而能夠有效的快速保持任何分辨率下保持視覺一致。

七、禁止選擇

當你但願頁面上的文字或者圖片不被用戶選擇時候亦或者禁止長按保存圖片時，可使用這個方法來實現。是否是很方便的說，但注意的是不可濫用，不然會出現一些沒法輸入或者點擊的狀況。

    a, img {
       -webkit-touch-callout:none;  /* 禁止長按連接與圖片彈出菜單 */
    }

    html, body {
       -webkit-user-select:none;   /* 禁止選中文本（如無文本選中需求，此爲必選項） */
       user-select:none;
    }

八、html5重力感應事件

　　手機搖一搖抽獎，大部分核心代碼就是這個。

 1         if (window.DeviceMotionEvent) { 
 2             window.addEventListener('devicemotion',deviceMotionHandler, false);  
 3         } 
 4         var speed = 30;//speed
 5         var x = y = z = lastX = lastY = lastZ = 0;
 6         function deviceMotionHandler(eventData) {  
 7             var acceleration =event.accelerationIncludingGravity;
 8             x = acceleration.x;
 9             y = acceleration.y;
10             z = acceleration.z;
11             if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
12                 alert('別搖那麼大力嘛...');
13                 // your code here
14             }
15             lastX = x;
16             lastY = y;
17             lastZ = z;
18         } 

九、開啓硬件加速優化動畫效果

若是你涉及到動畫製做，是否常常發如今PC端效果很是不錯，可是到了手機上就卡翔了。這個時候咱們能夠經過CSS開啓硬件加速來改善動畫效果，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速。CSS animations, transforms 以及 transitions 默認是不會自動開啓GPU加速，而是須要某些CSS規則來觸發，例如：transform: translate3d。開啓硬件加速後能夠解決頁面閃白等問題，可讓渲染更流暢。

十、佈局使用display彈性自適應

內容排版佈局顯示，儘可能少使用float，建議使用display的box、flex等（多欄）自適應佈局；優勢表如今：

• 獨立的高度控制與對齊
• 獨立的元素順序
• 指定元素之間的關係
• 靈活的尺寸和對齊方式

十一、base64編碼圖片替換小圖片

　　對於一些小圖片icon之類的，能夠將圖片用base64編碼，來減小網絡請求。可是對於大圖，就不要使用base64編碼了，否則你的代碼會變成無底洞，拉代碼滾動條拉到你想哭。編碼和解碼也須要計算量，比較耗費CPU。

　　base64有如下幾個優勢：

• 減小了HTTP網絡請求
• 避免某些文件跨域的問題
• 修改無需清緩衝，當即生效

十二、增長按鈕:active反應效果

　　當用戶在操做按鈕的時候，若是按鈕仍是死死的，沒有任何反應，這樣子的體驗是不好的，甚至是反人類的。在pc端咱們都會習慣加上hover屬性，來改變按鈕狀態；但移動端可不買這傢伙的賬，在移動端沒有鼠標一說，這個時候咱們就可讓active上場了，帶來的效果也是槓槓的。

 

1三、設置CSS3(@media)橫豎屏樣式

　　

    //豎屏時使用的樣式
    @media all and (orientation:portrait) {
        code here ...
    }

    //橫屏時使用的樣式
    @media all and (orientation:landscape) {
            code here ...
    }

 

 

1四、CSS3動效類型

常見的CSS3動畫效果類型：

　　

 參考

　　http://www.jiawin.com/mobile-web-development-solution