1. 1px邊框問(wèn)題解決方案

1.1 上邊框或者下邊框

.item-css3transform::after {
  content: '';
  display: block;
  height: 1px;
  transform: scaleY(0.5);
  background: #ccc;
  position: relative;
  top: 10px;
}

&::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  bottom: 0;
  border-bottom: 1px solid #cdcdcd;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(.5);
 }

1.2 四個(gè)邊框的情況，圓角需要加背景顏色，父子級(jí)元素加圓角屬性

 .register-input {
      padding-top: 1.1rem;
      width: 6rem;
      .phone-main,.msg-main {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        height: 0.9rem;
        font-size: 0.28rem;
        border-radius: 16px;
        width: 100%;
        background:#fff;
        &::after {
          pointer-events: none;
          box-sizing: border-box;
          display: block;
          content:"";
          position: absolute;
          z-index: -1;
          left:0;
          top:0;
          width: 200%;
          height: 200%;
          border: 1px solid #aeaeae;
          background:#fff;
          border-radius: 16px;
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
          -webkit-transform-origin: left top;
          transform-origin: left top;
        }
        .code-input, .phone-input {
          position: relative;
          z-index: 2;
          top: 1px;
          left: 1px;
          height: 0.86rem;
          font-size: 0.28rem;
          text-indent: 0.2rem;
          border-radius: 16px;
          border: none;
          background: transparent;
          &::placeholder {
            font-size: 0.28rem;
            line-height: 0.29rem;
            color: #b5b5b5;
          }
        }
      }

2. boder-radius： 50% 安卓手機(jī)兼容問(wèn)題

2.1 在安卓手機(jī) boder-radius:50%不是全圓

把元素rem寬高改為px罪既，或者把rem的值先放大一倍狠毯，再用scale縮小

.box{
    width:7px;
    height:7px;
    border-radius:50%; 
}

.box {
     width:.28rem;
     height:.28rem;
    border-radius:50%;
    transform: scale(.5);
    transform-origin: 0% center;
}

2.2 Android 2.3 自帶瀏覽器不支持 %

Android 2.3 是不支持百分比的于置，要兼容我們只能使用一個(gè)較大值劣光，比如border-radius: 999px;

2.3 Android 4.2.x 背景色溢出

測(cè)試發(fā)現(xiàn)，在 Android 4.2.x 系統(tǒng)自帶瀏覽器中称开，同時(shí)設(shè)置border-radius和背景色的時(shí)候亩钟，背景色會(huì)溢出到圓角以外部分乓梨，需要是使用background-clip: padding-box;來(lái)修復(fù)，但是如果border-color為半透明時(shí)清酥，背景直角部分依然會(huì)露出來(lái)（參見(jiàn)圖一）扶镀。

關(guān)于背景剪裁background-clip
css 代碼:
background-clip: border-box|padding-box|content-box;
值描述測(cè)試border-box背景被裁剪到邊框盒。測(cè)試padding-box背景被裁剪到內(nèi)邊距框焰轻。測(cè)試content-box背景被裁剪到內(nèi)容框臭觉。測(cè)試

用box-shadow模擬邊框
背景色溢出另一個(gè)解決辦法就是使用box-shadow模擬border；差不多可以達(dá)到效果
比如
box-shadow: 0 0 1px 1px #333333;
border: 1px solid #333333;

2.4 Android 4.2.x 不支持border-radius縮寫(xiě)

 這個(gè) BUG在小米上測(cè)試并未發(fā)現(xiàn)辱志，國(guó)外有人反映三星 Galaxy S4 中自帶瀏覽器不支持蝠筑。
 解決方案就是使用border-radius的四個(gè)擴(kuò)寫(xiě)屬性，縮寫(xiě)屬性放到最后揩懒。

.foo {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    background-color: #ccc;
    background-clip: padding-box;
}

2.5 css3中用border-radius畫(huà)出的圓在手機(jī)有毛邊

給元素加overflow:hidden

3. ios端兼容input光標(biāo)高度

問(wèn)題詳情描述：input輸入框光標(biāo)什乙，在安卓手機(jī)上顯示沒(méi)有問(wèn)題，但是在蘋(píng)果手機(jī)上
當(dāng)點(diǎn)擊輸入的時(shí)候已球，光標(biāo)的高度和父盒子的高度一樣臣镣。例如下圖，左圖是正常所期待的輸入框光標(biāo)智亮，右邊是ios的input光標(biāo)忆某。

出現(xiàn)原因分析：通常我們習(xí)慣用height屬性設(shè)置行間的高度和line-height屬性設(shè)置行間的距離（行高），當(dāng)點(diǎn)擊輸入的時(shí)候鸽素，光標(biāo)的高度就自動(dòng)和父盒子的高度一樣了褒繁。（谷歌瀏覽器的設(shè)計(jì)原則亦鳞，還有一種可能就是當(dāng)沒(méi)有內(nèi)容的時(shí)候光標(biāo)的高度等于input的line-height的值馍忽，當(dāng)有內(nèi)容時(shí)，光標(biāo)從input的頂端到文字的底部

解決辦法：高度height和行高line-height內(nèi)容用padding撐開(kāi)

.content{
  float: left;
  box-sizing: border-box;
  height: 88px;
  width: calc(100% - 240px);              
  .content-input{
    display: block;
    box-sizing: border-box;
    width: 100%;
    color: #333333;
    font-size: 28px;
    //line-height: 88px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
 }

4. ios端微信h5頁(yè)面上下滑動(dòng)時(shí)卡頓燕差、頁(yè)面缺失

問(wèn)題詳情描述：在ios端遭笋，上下滑動(dòng)頁(yè)面時(shí)，如果頁(yè)面高度超出了一屏徒探，就會(huì)出現(xiàn)明顯的卡頓瓦呼，頁(yè)面有部分內(nèi)容顯示不全的情況，例如下圖测暗，右圖是正常頁(yè)面央串，邊是ios上下滑動(dòng)后，卡頓導(dǎo)致如左圖下面部分丟失碗啄。

出現(xiàn)原因分析：
籠統(tǒng)說(shuō)微信瀏覽器的內(nèi)核质和，Android上面是使用自帶的WebKit內(nèi)核，iOS里面由于蘋(píng)果的原因稚字，使用了自帶的Safari內(nèi)核饲宿，Safari對(duì)于overflow-scrolling用了原生控件來(lái)實(shí)現(xiàn)厦酬。對(duì)于有-webkit-overflow-scrolling的網(wǎng)頁(yè)，會(huì)創(chuàng)建一個(gè)UIScrollView瘫想，提供子layer給渲染模塊使用仗阅。【有待考證】

解決辦法：只需要在公共樣式加入下面這行代碼

*{
  -webkit-overflow-scrolling: touch;
}

But国夜，這個(gè)屬性是有bug的减噪，比如如果你的頁(yè)面中有設(shè)置了絕對(duì)定位的節(jié)點(diǎn)，那么該節(jié)點(diǎn)的顯示會(huì)錯(cuò)亂车吹，當(dāng)然還有會(huì)有其他的一些bug旋廷。

拓展知識(shí)： -webkit-overflow-scrolling:touch是什么？

MDN上是這樣定義的：

-webkit-overflow-scrolling 屬性控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果.
auto: 使用普通滾動(dòng), 當(dāng)手指從觸摸屏上移開(kāi)礼搁，滾動(dòng)會(huì)立即停止饶碘。

touch: 使用具有回彈效果的滾動(dòng), 當(dāng)手指從觸摸屏上移開(kāi)，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果馒吴。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比扎运。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。

5. ios鍵盤(pán)喚起饮戳，鍵盤(pán)收起以后頁(yè)面不歸位

問(wèn)題詳情描述：
輸入內(nèi)容豪治，軟鍵盤(pán)彈出，頁(yè)面內(nèi)容整體上移扯罐，但是鍵盤(pán)收起负拟，頁(yè)面內(nèi)容不下滑

出現(xiàn)原因分析：
固定定位的元素 在元素內(nèi) input 框聚焦的時(shí)候 彈出的軟鍵盤(pán)占位 失去焦點(diǎn)的時(shí)候軟鍵盤(pán)消失 但是還是占位的 導(dǎo)致input框不能再次輸入 在失去焦點(diǎn)的時(shí)候給一個(gè)事件

解決辦法：

<div class="list-warp">
  <div class="title"><span>投·被保險(xiǎn)人姓名</span></div>
   <div class="content">
     <input class="content-input" 
            placeholder="請(qǐng)輸入姓名"
            v-model="peopleList.name"
           @focus="changefocus()"
           @blur.prevent="changeBlur()"/>
     </div>
 </div>
 <script>
 changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    }
 </script>

拓展知識(shí)： position: fixed的元素在ios里，收起鍵盤(pán)的時(shí)候會(huì)被頂上去歹河，特別是第三方鍵盤(pán)

6. 安卓彈出的鍵盤(pán)遮蓋文本框

問(wèn)題詳情描述：
安卓微信H5彈出軟鍵盤(pán)后擋住input輸入框掩浙，如下左圖是期待喚起鍵盤(pán)的時(shí)候樣子，右邊是實(shí)際喚起鍵盤(pán)的樣子

出現(xiàn)原因分析：待補(bǔ)充
解決辦法：給input和textarea標(biāo)簽添加focus事件秸歧，如下厨姚，先判斷是不是安卓手機(jī)下的操作，當(dāng)然键菱，可以不用判斷機(jī)型谬墙，Document 對(duì)象屬性和方法，setTimeout延時(shí)0.5秒经备，因?yàn)檎{(diào)用安卓鍵盤(pán)有一點(diǎn)遲鈍拭抬，導(dǎo)致如果不延時(shí)處理的話(huà)，滾動(dòng)就失效了

    changefocus(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      if(isAndroid){
        setTimeout(function() {
         document.activeElement.scrollIntoViewIfNeeded();
         document.activeElement.scrollIntoView();
        }, 500);       
      }
    },

拓展知識(shí)：
Element.scrollIntoView()方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)侵蒙。而Element.scrollIntoViewIfNeeded()方法也是用來(lái)將不在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域造虎。但如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)

// 鍵盤(pán)彈出后擋表單的解決方案

window.addEventListener('resize', function () {
    if (
      document.activeElement.tagName === 'INPUT' ||
      document.activeElement.tagName === 'TEXTAREA' ||
      document.activeElement.getAttribute('contenteditable') == 'true'
    ) {
      window.setTimeout(function () {
        if ('scrollIntoView' in document.activeElement) {
          document.activeElement.scrollIntoView();
        } else {
        
          document.activeElement.scrollIntoViewIfNeeded();
        }
      }, 0);
    }
})

7. Vue中路由使用hash模式蘑志，開(kāi)發(fā)微信H5頁(yè)面分享時(shí)在安卓上設(shè)置分享成功累奈，但是ios的分享異常

問(wèn)題詳情描述：
ios當(dāng)前頁(yè)面分享給好友贬派，點(diǎn)擊進(jìn)來(lái)是正常，如果二次分享澎媒，則跳轉(zhuǎn)到首頁(yè)搞乏；使用vue router跳轉(zhuǎn)到第二個(gè)頁(yè)面后在分享時(shí)，分享設(shè)置失斀渑请敦；以上安卓分享都是正常

出現(xiàn)原因分析：jssdk是后端進(jìn)行簽署，前端校驗(yàn)储玫，但是有時(shí)跨域侍筛，ios是分享以后會(huì)自動(dòng)帶上 from=singlemessage&isappinstalled=0 以及其他參數(shù)，分享朋友圈參數(shù)還不一樣撒穷，貌似系統(tǒng)不一樣參數(shù)也不一樣匣椰，但是每次獲取url并不能獲取后面這些參數(shù)

解決辦法：

(1) 可以使用改頁(yè)面this.$router.push跳轉(zhuǎn)，為window.location.href去跳轉(zhuǎn)端礼，而不使用路由跳轉(zhuǎn)禽笑，這樣可以使地址欄的地址與當(dāng)前頁(yè)的地址一樣，可以分享成功（適合分享的頁(yè)面不多的情況下蛤奥，作為一個(gè)單單頁(yè)運(yùn)用佳镜，這樣刷新頁(yè)面跳轉(zhuǎn)，還是..）

（2）把入口地址保存在本地凡桥，等需要獲取簽名的時(shí)候 取出來(lái)蟀伸，注意：sessionStorage.setItem(‘href’,href); 只在剛進(jìn)入單應(yīng)用的時(shí)候保存！【該方法未驗(yàn)證】

8. 其他問(wèn)題

8.1 ios和android下觸摸元素時(shí)出現(xiàn)半透明灰色遮罩

   a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0）
    -webkit-user-modify:read-write-plaintext-only;
}

android用戶(hù)點(diǎn)擊一個(gè)鏈接缅刽，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣啊掏，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果

-webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符·
另外拷恨，有些機(jī)型去除不了脖律，如小米2

對(duì)于按鈕類(lèi)還有個(gè)辦法谢肾，不使用a或者input標(biāo)簽腕侄，直接用div標(biāo)簽

8.2 IOS 默認(rèn)輸入框內(nèi)陰影重置

/*E:這個(gè)是代指字符，實(shí)際自己替換芦疏，ID,CLASS,TAG*/
   E{
     border: 0;  
     -webkit-appearance: none; 
  }

8.3 旋轉(zhuǎn)屏幕時(shí)冕杠，字體大小調(diào)整的問(wèn)題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}

8.4 transition閃屏

/設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留3D /
-webkit-transform-style: preserve-3d;
/ 設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶(hù)時(shí)是否可見(jiàn)：隱藏 /
-webkit-backface-visibility:hidden;
開(kāi)啟硬件加速
解決頁(yè)面閃白
保證動(dòng)畫(huà)流暢
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

8.5 placeholder的顏色值改變

input::-webkit-input-placeholder{color:#F40;}
input:focus::-webkit-input-placeholder{color:#F40;}

8.6 移動(dòng)端禁止選中內(nèi)容

E {
-webkit-user-select: none; /* Chrome all / Safari all /
-moz-user-select: none; / Firefox all （移動(dòng)端不需要） /
-ms-user-select: none; / IE 10+ */
}

8.7 IOS禁止保存或拷貝圖像

長(zhǎng)按圖片保存場(chǎng)景下，禁止IOS默認(rèn)識(shí)別圖像行為

img { -webkit-touch-callout: none; }

8.8 IOS中input鍵盤(pán)事件調(diào)用緩慢

直接改為監(jiān)聽(tīng)input事件
document.getElementById('test').addEventListener('input',fn,false);

8.9 頁(yè)面高度渲染錯(cuò)誤

document.documentElement.style.height = window.innerHeight + 'px';

8.10 怪異懸浮的表單

在部分android 機(jī)型中的輸入框可能會(huì)出現(xiàn)如圖怪異的多余的浮出表單酸茴，經(jīng)過(guò)觀察與測(cè)試發(fā)現(xiàn)只有input:password類(lèi)型的輸入框存在分预，那么我們只要使用input:text類(lèi)型的輸入框并通過(guò)樣式-webkit-text-security: disc; 隱藏輸入密碼從而解決。

input[type=text]{
-webkit-text-security: disc;
}

8.11 取消input在ios下薪捍，輸入的時(shí)候英文首字母的默認(rèn)大寫(xiě)

<input autocapitalize="off" autocorrect="off" />

8.12 android 上去掉語(yǔ)音輸入按鈕

input::-webkit-input-speech-button {display: none}

9. 其他一些建議

能用transform實(shí)現(xiàn)的過(guò)渡的笼痹，可以不考慮animation實(shí)現(xiàn)配喳；animation在部分機(jī)子過(guò)渡非常掉幀，體驗(yàn)非常糟糕凳干，遇到過(guò)好幾次

頁(yè)面有滾動(dòng)區(qū)域的建議引入iscroll5，可以避免很多天坑

頁(yè)面應(yīng)該盡可能的減少?gòu)?fù)雜的DOM【一個(gè)功能點(diǎn)，DOM結(jié)構(gòu)越直白畜号，越好維護(hù)】切油，復(fù)雜DOM會(huì)增加維護(hù)難度

考慮移動(dòng)端響應(yīng)布局，建議引入阿里巴巴出品的lib-flexible , IOS動(dòng)態(tài)調(diào)整DPR经磅，其他設(shè)備默認(rèn)DPR1

點(diǎn)透事件可以引入fastclick或者不用click泌绣，改為touch來(lái)寫(xiě)，亦或者引入zepto的tap事件