PC端

pc端因為做的比較少，這里就舉幾個常見的問題：

css樣式的兼容性問題：

1、不同瀏覽器的margin,padding值不同，通常我們都是全局清除
*{margin:0;paddding:0}
2、不同瀏覽器對css3的支持度不同，解決方案就是加前綴
-webkit- -moz-
3、對于一些要兼容ie版本的，這里就不細(xì)舉了，畢竟ie10以下的很少有人再去處理了，要兼容低版本ie和一些其他瀏覽器也可以用hack的方法，就是在樣式前加上前綴，例如：
_ * +

js兼容性問題 如果使用原生其實還是比較多問題的

1、比如獲取瀏覽器可以區(qū)寬高、滾動距離
2、鼠標(biāo)、鍵盤事件等
3、原生獲取樣式
4、火狐的滾輪事件

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//網(wǎng)頁可見區(qū)域?qū)?
var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整個網(wǎng)頁的寬
var 
scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//網(wǎng)頁被卷去的高

//獲取鼠標(biāo)的位置 這個在做拖拽時常用
 document.οnclick=function(ev){//兼容寫法；
      var e=ev||window.event;
      var mouseX=e.clientX;//鼠標(biāo)X軸的坐標(biāo)
      var mouseY=e.clientY;//鼠標(biāo)Y軸的坐標(biāo)
  }

//獲取css樣式 這在最初我寫原生js的時候會用這種方法 現(xiàn)在框架也就不考慮了
   function getStyle(object,oCss) {
      if (object.currentStyle) {
          return object.currentStyle[oCss];//IE
      }else{
          return getComputedStyle(object,null)[oCss];//除了IE
       }
    }

//還有奇葩的火狐滾輪事件 也是聽說過沒有遇到過
  //火狐中的滾輪事件
    document.addEventListener("DOMMouseScroll",function(event){
        alert(event.detail);//若前滾的話為 -3，后滾的話為 3
    },false)
    //非火狐中的滾輪事件
    document.onmousewheel=function(event){
        alert(event.detail);//前滾：120，后滾：-120
    }

移動端

移動端的兼容性主要是出在android、ios中，他們因為內(nèi)核的不一樣，導(dǎo)致出現(xiàn)很多問題，下面看下我遇到的常見的問題

1、鍵盤彈出事件

這是一個很有意思的問題，當(dāng)高度為100%時，android在鍵盤彈出的時候，我們可能會遇到以下問題：
1、遮住了我們原來的內(nèi)容，看不到輸入框
2、如果底部有按鈕，按鈕從底部彈上來，影響視覺效果
3、樣式錯亂

出現(xiàn)這個問題的原因就是android的鍵盤是算入總高度的，ios的鍵盤彈出不算入總高度，原來1000px的高度變成了700px，所以我們從這解決問題就很簡單了。

解決樣式錯亂我們可以給元素設(shè)置固定高度，用px代替百分比，隨之帶來的是鍵盤被遮擋的問題，解決這東西我們可以用scrollIntoView，讓內(nèi)容滾動到可視區(qū)，或者設(shè)置元素向上滾動鍵盤的高度。

var oHeight = document.body.offsetHeight
window.onresize=function(){
    var height = document.body.offsetHeight
    window.scrollTo(0,height-oHeight)
}

解決底部按鈕彈上來這個問題可以有多種解決方案，只要看不見就好了。
所以我們可以在鍵盤彈出的時候可以采用以下方法：
1、將按鈕的定位改為absolute,bottom為負(fù)數(shù)
2、將按鈕隱藏，鍵盤收起的時候?qū)粹o顯示

2、300ms延遲

這是存在于ios的一個問題。之前為了辨別雙擊放大事件，給了click一個延遲，常用的解決方案就是因一個fastClick.js

3、ios會將長串的數(shù)字識別為電話

加一個meta標(biāo)簽即可
<meta content="telephone=no" name="format-detection" />

4、ios label內(nèi)的checkbox點擊失效

我們可以給label添加一個點擊事件，通過點擊事件改變checkbox的值

5、進入頁面輸入框自動聚焦，ios頁面會卡頓 android無法調(diào)出鍵盤

ios卡頓的問題加一個延遲即可，設(shè)置300ms之后再獲取焦點
android因為我是調(diào)的庫解決鍵盤不彈出的問題，這里原生我也不清楚怎么寫。

6、ios中給input設(shè)置type=search，但是鍵盤右下角不是搜索的字樣

這里把input放進form表單即可