移動端前端題

一. css部分

1. body若是設置height:100%;overflow:hidden是依然能夠滑動的，若是需禁止，要再加一層div設置 height:100%加overflow：hidden（html,body加height:100%） ，這樣元素超出body的高度也不能滑動了

2. meta標籤

   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移動端加上這個標籤纔是真正的自適應，不加的話，假如你把一個960px寬度的PC網頁放在手機上顯示，倒也能正常顯

   示不出現滾動條，不過是移動設備對頁面 作了縮小優化，因此字體等都相應縮小了（960px是相對於手機像素的，個人是超過1000px多一些就出現滾動條了，這個沒具體研究。

   關於  initial-scale=1 ，這個是參照iphone5的尺寸320*568，若是你頁面按照640*1136作的話，scale就設爲0.5                     

   <meta content="yes" name="apple-mobile-web-app-capable">   IOS中safari容許全屏瀏覽 <meta content="black" name="apple-mobile-web-app-status-bar-style">  IOS中Safari頂端狀態條樣式

   <meta content="telephone=no" name="format-detection">  忽略將數字變爲電話號碼

   <meta content="email=no" name="format-detection">   忽略識別email

3. 作全屏顯示的圖片時，通常爲了兼容大部分的手機，圖片尺寸通常設爲640*960（我是以爲這個尺寸好，也看很多的圖片也是這個尺寸，是狀況而定）

4. 去除webkit的滾動條

   element::-webkit-scrollbar{

   display: none;

   }

5. 去除button在ios上的默認樣式

   -webkit-appearance: none;

   border-radius: 0

6. 不想讓按鈕touch時有藍色的邊框     -webkit-tap-highlight-color:rgba(0,0,0,0);

7. 若是要用到fixed譬如導航等，能夠用absolute達到同樣的效果，把body設爲100%；將元素absolute到body上便可

8. 在移動端作動畫效果的話，若是經過改變絕對定位的top，或者margin的話作出來的效果不好，很不流暢，而使用css3的transition或者animation的效果將會很是棒（這一方面IOS比android又要好很多）

9. 使用圖片時，會發現圖片下老是有大概4px的空白，（緣由聽說圖片是inline，觸發baseline什麼的。。。）經常使用解決方法有

   img{display:block}；

   img{vertical-align:top}也可取其餘幾個值，視狀況而定

   其餘解決辦法 見此

10. 學會使用display:-webkit-box的佈局，能很好地幫咱們作到頁面自適應，譬如 導航欄 這些我的以爲特別適合，具體使用方法此處不敘述

11. 使用 a 標籤的話，儘可能讓 a 標籤 block ，儘可能讓用戶可點擊區域最大化

12. 兩個頁面使用了transform以後，頁面下的z-index有時就會失效，我遇到過，但沒去認真探究，只是把z-index提升就行了，若是遇到這個問題的，詳細能夠 看這

13. 在iOS中，當你點擊好比 input 準備輸入時，虛擬鍵盤彈出，整個視窗的 高度 就會變爲 減去鍵盤 的高度，加入你在底部有fixed的元素好比btn，這個元素就會跑上來，通常都不會太美觀。我是當focus時就把它設爲absolute，視狀況而定

14. 禁止用戶選中文字   -webkit-user-select:none

15. 當你把input設爲 width:100%時，有時可能會遇到input的寬度超出了屏幕，這時可對input加一個屬性 box-sizing:border-box

    關於box-sizing:border-box，此屬性是把邊框的高寬包含在盒子的高寬中，假如你設置兩個元素float且各佔50%，又都有border時，用這個屬性就能夠完美地讓它們能顯示在同一行

16. 要table的td用col設置了寬度後超出部分隱藏的話給table加屬性table-layout:fixed（固定寬度佈局）

17. 若是想改變 placeholder  裏的文字，須要用css僞類      ::-webkit-input-placeholder{color:#ccc}

二. JS部分

1. 若是使用jquery綁定touch事件的話，獲取touchstart，touchmove的觸點座標用 e.originalEvent.targetTouches[0].pageX，獲取touchend則用 e.originalEvent.changedTouches[0].pageX

2. 利用style獲取獲取transform的rotate值

   parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])

   若是頁面一開始沒有style值，rotate是寫在CSS裏的，須要用到getComputedStyle，具體請看 這裏 。

3. 有些版本的iphone4中， audio和video默認播放事件不會觸發，好比使用window.onload或計時器等都不能觸發播放，必須用JS寫事件讓用戶手動點擊觸發纔會開始播放

4. 想要在touchmove:function(e,參數一)加一個參數，結果直接使用e.preventDefault() 就會 e 報錯，處理方法爲

   touchmove:function(e,參數一){

   var e=arguments[0]

   e.preventDefault()

   }

5. HTML5的新js API有新的選擇器，好比querySelector(".class #id")和querySelectorAll(".class  element")。
6. 點擊一個元素時，使用touchstart會當即觸發，而使用click則用有大概0.3s的延遲

1. 判斷是否來自微信瀏覽器

   function isFromWeiXin() {

   var ua = navigator.userAgent.toLowerCase();

   if (ua.match(/MicroMessenger/i) == "micromessenger") {

   return true;

   }

   return false;

   }

2. 判斷手機的類型

   var user="";

   if (/android/i.test(navigator.userAgent)){

   //  android

   user="1";

   }

   if (/ipad|iphone|mac/i.test(navigator.userAgent)){

   //  ios

   user="0";

   }

3. 微信瀏覽器裏均不能打開下載的連接，需在瀏覽器打開

4. 若是在網頁裏嵌套一個iframe，src爲其餘的網址等，當在微信瀏覽器打開時，若是irame裏的頁面過大，則iframe的src不能加載（具體多大不知道，只是遇到過）

5. 微信升級到6.0後，在微信網頁裏須要用到設置分享的標題等，須要用到JSSDK，同時去微信公衆平臺裏綁定裏放置網頁的域名。 不過JSSDK也不是全部問題都解決了，在android裏點擊分享到朋友圈時就觸發了分享成功的回調函數，即便取消分享也已經觸發了成功的函數（如今不知道是否有修復，若是遇到了這類問題，應該就是這個緣由）