H5填坑筆記--持續更新

時間 2019-11-17

標籤 h5 筆記持續更新简体版

原文原文鏈接

　　最近一直在作移動端的頁面，發現不少的坑，這裏作一下總結，填填坑……css

css常見的問題（一）

1、iOS鍵盤首字母自動大寫

　　IOS的機子，默認英文輸入法狀態下，首字母是自動大寫的，有時候挺煩人的。html

　　在iOS中，默認狀況下鍵盤是開啓首字母大寫的功能的，若是業務不想出現首字母大寫，能夠這樣：html5

<input type="text" autocapitalize="off" />

2、iOS輸入框默認內陰影和樣式問題

　　在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉，不過加了上面的屬性後，iOS下默認仍是帶有圓角的，不過可使用 border-radius屬性修改：android

input,
textarea {
    border: 0; 
    -webkit-appearance: none; 
}

3、andriod輸入框type = "number"存在樣式問題

去除input[type=number]的默認樣式ios

input[type=number] {
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

4、輸入框光標不居中問題

　　一般，移動端若是咱們不設置line-height值時，大部分機器輸入框的光標是能夠居中的，可是若是咱們用line-height：$height值，卻致使光標不居中問題git

　　遇到這個問題，咱們只能用line-height：$height\9來處理居中問題，這裏就不能用line-height：$height，示例代碼：github

height:40px;
line-height:40px\9;
font-size:16px;

5、輸入框前置用text-indent縮進問題

　　css中text-indent縮進，可是在部分andriod機中，光標是輸入框先得到光標依然在最左邊，而後輸入文字纔到縮進的值，這樣很很差，建議經過padding-left設置縮進，完美解決。web

6、a標籤默認激活高亮框問題

　　在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來禁止：segmentfault

.xxx {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

　　這個設置，在大部分機子上都是起效果的。可是，移動端三星自帶瀏覽器，點擊頁面任意a標籤時，設置-webkit-tap-highlight-color:rgba(0,0,0,0)仍是會有陰影底色，這應該是瀏覽器強制加上去的，經過代碼設置也沒法覆蓋。api

　　有一種妥協的方法是把頁面非真實跳轉連接的a標籤換成其它標籤，能夠解決這個問題。

7、Android 2.3 自帶瀏覽器不支持border-radius 中 %

　　建議你們寫在使用border-radius寫圓角時，仍是不要border-radius:50%實現圓，建議用具體的數值。

8、border邊框1像素問題

　　移動端當設置通用viewport 後。代碼中的 1px 單位的邊框實際在高清屏( @2x )pixel-ratio:2上顯示的是2像素，pc ( 非高清屏幕 ) 上顯示的正常的1px。

border:1px solid #000

　　可能看到這裏，你們又有疑問了，幹嗎咱們不把border-width:0.5px呢，但是早的瀏覽器不支持，到了ios8.0才支持這個。

　　如今一般來講有兩種解決方案：1.經過border-image實現(但缺點是不能實現四邊邊框,並且加載浪費資源) 2.經過scale進行縮放

　　1.border-image 實現演示(掃碼地址)：

　　2.經過scale進行縮放

　　　　①單邊1像素邊框處理方法經過僞類畫出邊框，而後經過scale將其縮放，最後處理@1.5x(安卓機器) @2.0x(ios機器) @3.0x(注意是 1080p)的縮放比例

%border-btm-1pt{
  content: '';
  height: 0px;
  display: block;
  border-bottom:1px solid #ddd;
  position: absolute;
  left:0;
  right:0;
  bottom:0;
}
.some_div{
    position:relative; // 由於僞類用的absolute 因此須要添加 relative 
    &:after{
        @extend %border-btm-1pt
        border-color:#f09;  // 在這裏自定義邊框顏色。
    }
 
}

//適配早期的andriod機器    1/1.5 = 0.666
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .some_div{
        -webkit-transform: scaleY(0.666)
    }
}
//高清屏( @2x ) iphone這種  1/2 = 0.5
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .some_div{
        -webkit-transform: scaleY(0.5)
    }
}
//1080機子@3x 
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .some_div{
        -webkit-transform: scaleY(0.333)
    }
}

　案例：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 120dpi),(-ms-high-contrast: active),(-ms-high-contrast: none) {
    .jd_space:after{
        -webkit-transform:scaleY(0.5);
        -webkit-transform-origin: 50% 100%
    }

    .jd_space:before{
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin: 50% 0%
    }

    .jd_brand{
        -webkit-transform: scaleX(0.5);
        -webkit-transform-origin: 0% 0%
    }

    .jd_brand{
        -webkit-transform: scaleX(0.5);
        -webkit-transform-origin: 0% 0%
    }

    .jd_madden{
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0% 0%;
        bottom: -100%;
        right: -100%
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .jd_space:before{
        -webkit-transform: scaleY(0.333)
    }

    .jd_madden{
        -webkit-transform: scale(0.333);
        -webkit-transform-origin: 0% 0%;
        bottom: -200%;
        right: -200%
    }
}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {
    .jd_space:before{
        -webkit-transform: scaleY(0.666)
    }

    .jd_madden .jd_item:before{
        -webkit-transform: scale(0.666);
        bottom: -50%;
        right: -50%
    }
}

　　　②處理四邊邊框1px問題，兩種思路：1.子邊框兩邊經過僞類，父邊框兩邊經過僞類 2.一個僞類，畫出四邊邊框，而後經過width:200%;height:200%（這裏主要說的是@2.0x機器，因爲@1.5 @3比例沒法算整會致使不夠精確，不予討論）;即把內容縮放兩倍，進行縮放scale ，處理。

　　　　這裏舉例第二種狀況(可是這裏要注意的是，若是容器裏面有a連接，就會致使設置的僞類遮住元素，沒法點擊，因此容器裏面的內容也要設置絕對定位)：

    <style type="text/css">

        h3{text-align:center}
        div.border_scale{
            margin:100px auto;
            width:600px;
            height:150px;
            position:relative;
        }
        div.border_scale:before{
            display:block;
            position:absolute;
            content:"\20";
            width:200%;
            height:200%;
            border:1px solid #000;
            -webkit-transform-origin:0 0;
            transform-origin:0 0;
            -webkit-transform:scale(0.5);
            transform:scale(0.5);
            top:-1px;
            left:-1px;
        }
        div.border_scale a{
            display:block;
            width:100%;
            height:100%;
            text-align:center;
        }
    </style>

    <h3>border的1像素框 scale</h3>
    <div class="border_scale">
        <a href="http://www.baidu.com">百度</a>
    </div>

　　sass庫 1像素邊框：

%border-1pt{
  content: '\20';
  display: block;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  pointer-events:none;
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none){
  %border-1pt{
    -webkit-transform:scale(0.5);
    -webkit-transform-origin:0% 0%;
    bottom:-100%;
    right:-100%;
  }
}
    
@media only screen and (-webkit-min-device-pixel-ratio:3){
  %border-1pt{
    -webkit-transform:scale(0.333);
    -webkit-transform-origin:0% 0%;
    bottom:-200%;
    right:-200%;
  }
}

@media only screen and (-webkit-device-pixel-ratio : 1.5){
  %border-1pt{
    -webkit-transform:scale(0.666);
    bottom:-50%;
    right:-50%;
  }
}

div.border_test{
  margin:20px;
  height:200px;
  position: relative;
  background: orange
}
div.border_test:before{
 @extend %border-1pt;
  border:1px solid #fff;
}

9、經過transform進行skew變形，rotate旋轉會形成出現鋸齒現象

　　在製做H5頁面咱們不免會對一些元素進行旋轉、變形，但是這樣卻惡來許多麻煩，出現鋸齒他媽的咋辦，還不如直接圖片，對吧。

　　咱們能夠經過這樣直接解決煩惱：我發現呢微信更新到6.2.4以後對旋轉鋸齒有些修復

    -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
    transform: rotate(-4deg) skew(10deg) translateZ(0);
    outline: 1px solid rgba(255,255,255,0)

10、h5頁面中內容滾動滾動條問題

　　在咱們作h5頁面時，常常遇到要在容器內容裏面作滾動調的問題，可是，當咱們用那些滾動條時，發現，在andriod裏面實在是太醜陋了，一般還會出問題，產品MM也接受不了，因此這裏給你們提供一個解決方案：

.scroll::-webkit-scrollbar{width:5px; height:5px;}
.scroll::-webkit-scrollbar-button{width:0;height:0;}
.scroll::-webkit-scrollbar-corner{display:block; }
.scroll::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:rgba(0,0,0,.2);border-radius:8px;}//還能夠設置滾動條的顏色
.scroll::-webkit-scrollbar-thumb:hover{background-clip:padding-box;background-color:rgba(0,0,0,.5);border-radius:8px;}

　　讓咱們的滾動條變成這樣，今後媽媽不再用擔憂滾動條問題了，上圖：

11、CSS3 timing-function: steps()理解運動函數的問題

　　steps() 第一個參數 number 爲指定的間隔數，即把動畫分爲 n 步階段性展現，第二個參數默認爲 end，設置最後一步的狀態，start 爲結束時的狀態，end 爲開始時的狀態。

　steps 有兩個參數
　　第一個確定是分幾步執行完
　　第二個有兩個值
　　　　start 第一幀是第一步動畫結束    //第一個階段結束以後的值
　　　　end 第一幀是第一步動畫開始　　　//第一個階段開始的值

理解 start 第一幀是第一步動畫結束 end 第一幀是第一步動畫開始，number爲階段數

demo：http://pingfan1990.sinaapp.com/honor7/anim.html

咱們看最後一個tab，能夠反襯出如下

12、inline-display 在andriod2.3下經過:before僞類致使擠下去的問題

　　這裏建議用:after將容器撐起。

steps() 第一個參數將動畫分割成三段。當指定躍點爲 start 時，動畫在每一個計時週期的起點發生階躍（即圖中空心圓 → 實心圓）。因爲第一次階躍發生在第一個計時週期的起點處（0s），因此咱們看到的第一步動畫（初態）就爲 1/3 的狀態，所以在視覺上動畫的過程爲 1/3 → 2/3 → 1 。

當指定躍點爲 end，動畫則在每一個計時週期的終點發生階躍（即圖中空心圓 → 實心圓）。因爲第一次階躍發生在第一個計時週期結束時（1s），因此咱們看到的初態爲 0% 的狀態；而在整個動畫週期完成處（3s），雖然發生階躍跳到了 100% 的狀態，但同時動畫結束，因此 100% 的狀態不可視。所以在視覺上動畫的過程爲 0 → 1/3 → 2/3（回憶一下數電裏的異步清零，當全部輸出端都爲高電平的時候觸發清零，因此全爲高電平是暫態）。　　

　　可是當咱們看到這樣的圖片的時候，知道這個有12幀，我麼就會理解爲steps(12)，其實這裏是11個階段完成的，應該是steps(11);

　　demo：http://pingfan1990.sinaapp.com/honor7/anim1.html

　　steps(11)幀等價於，總長1680，默認是steps(11,end):

        @-webkit-keyframes run1{
              0%{ background-position: 0 0; }
              9.09%{ background-position: -140px 0; }
              18.18%{ background-position: -280px 0; }
              27.27%{ background-position: -420px 0; }
              36.36%{ background-position: -560px 0; }
              45.45%{ background-position: -700px 0; }
              54.54%{ background-position: -840px 0; }
              58.33% { background-position: -980px 0; }
              63.63% { background-position: -1120px 0; }
              72.72% { background-position: -1260px 0; }
              81.81% { background-position: -1400px 0; }
              /*中間缺10張圖，11個階段*/
              100% {
                background-position: -1540px 0; // 12幀
              }    
        }

　　而steps(12)幀等價於，總長1680，默認是steps(12,end):

//這裏background-position-x按幀均分，我就不算了
@keyframes run {
  0% { background-position: 0 0; }
  8.33% { background-position: -140px 0; }
  16.67% { background-position: -280px 0; }
  25% { background-position: -420px 0; }
  33.33% { background-position: -560px 0; }
  41.67% { background-position: -700px 0; }
  50% { background-position: -840px 0; }
  58.33% { background-position: -980px 0; }
  66.67% { background-position: -1120px 0; }
  75% { background-position: -1260px 0; }
  83.33% { background-position: -1400px 0; }
  91.67% { background-position: -1540px 0; }
  100% { background-position: -1540px 0; }
}

　作動畫時請不要在:before和：after這些僞類身上作動畫，移動端不支持。作animation動畫時，咱們能夠結合，webkitAnimationEnd 這個事件來監聽，改變更畫，作出更炫的效果。

12、animation不簡寫，可能形成的問題

　　今天作動畫時遇到animation不簡寫致使的問題，爲了讓動畫達到步奏迭代，咱們一般會用animation-delay來設置延遲時間，可是我發現單獨分開寫時，會致使在紅米手機上面出現，動畫元素失真的問題。

十3、animation屬性值js控制

　　常見的文字左右滾動一般實現形式就用animation實現設置好duration時間，可是有些時候，咱們但願動態改變animation-duration的執行時間，可是發現ios生效，android不生效這種狀況，是因爲animation初始渲染以後，android改動是不容許生效的，這時咱們只能在頁面初始加載的時候，在頭部加入js，document.write()寫入樣式進行控制了。

十4、transform中scale放大圖形致使失真的問題

　　昨天遇到一個問題，就是一個白色小圓經過scale放大，致使在移動端出現不一樣程度的失真，ios邊緣很刺，andriod就顯示成邊緣半透明的方向了。

　　最終發現咱們經過transform的scale進行縮放，實際上是對位圖放大（無論圖片仍是圖形），會致使失真，解決辦法，先用大的圖形，進行縮小操做。

十5、translate3d引發的問題

　　1.translate3d會引發兄弟元素的z-index層級無效；緣由是t3d實際是有z軸層的變換，解決辦法本身處理的是在兄弟元素上也加上t3d。
　　2.translate3d內部的fixed元素效果失效；從css角度無解，只能js控制或者把它抽離成t3d的兄弟元素。

十4、position定位引發的ios樣式問題

　　兩種狀況：

<i class="fix_jd">獎勵20豆</i>


樣式
i.fix_jd{
	position:fixed;
	bottom:60px;
	display: block;
	padding:0 10px;
	background: #e4393c ;
	height:16px;
	line-height: 16px;
	font-size: 12px;
	@include boradius(8px);
	color:#fff;
	left:48.4%;	
	z-index: 1;
	&:before{
		display: block;
		position: absolute;
		content:"\20";
		@include base64Img("border_san.png");
		 bottom:-4px;
		 left:10px;	
	}
}

　　1.父級 position:fixed, 子級position:absolute，可能致使色塊隨滾動條的變化，變藍色。

　　左邊是須要的正常效果，右邊是因爲滾動條滾動出錯的效果。

　　我最終的解決辦法就是調整結構，用兩個position:fixed，或者，整個層，只用一個position:fixed.

　　2.父級 position:relative,子級position:absoltue，從子級position:absolute，致使，從子級的圓角沒法溢出隱藏。

　　這個問題主要出如今一些ios版本比較舊的機型上面，也是同樣，調整結構，儘量的少用position。

十5、position:fixed吸頂菜單，js監聽阻塞，吸頂延遲問題

　　解決ios8.4版以上移動端，吸頂延遲問題

sticky 元素只能在父容器內活動
sticky 元素父容器不能含有overflow:hidden 和 overflow:auto 屬性

　　示例代碼：

<div class="wx618_tabs">
        <ul>
            <li class="cur">手機</li>
            <li>IT數碼</li>
            <li>家電<span class="sign_c_tip">小氣泡</span></li>
            <li>時尚服飾</li>
        </ul>
    </div>

　　css樣式：

.wx618_tabs {
  position: relative;
  .wx618_tabs.fixed ul {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%; 
    }
}

@supports (position: -webkit-sticky) {
  .wx618_tabs {
        position: -webkit-sticky;
        top: 80px; 
    }
    .wx618_tabs.fixed ul {
          position: relative; 
      } 
  }

js常見的問題（二）

1、移動端點擊300ms延遲的問題　

　　click300ms延遲是因爲iphone採用的是雙擊默認是放大頁面，實現click是判斷第二次點擊間隔時間300ms認定爲click，許多廠家沿用而致使的，click 事件由於要等待雙擊確認，會有 300ms 的延遲，體驗並非很好。

　　開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。

　　FastClick.js和tap.js能夠有效的解決300ms延遲的問題。

　　參考資料單擊300ms延遲

2、移動端點透問題

　　簡單的說，因爲在移動端咱們常常會使用tap(touchstart)事件來替換掉click事件，那麼就會有一種場景是：

<div id="mengceng"></div>
 
<a href="www.jd.com">www.jd.com</a>

　　div是絕對定位的蒙層z-index高於a，而a標籤是頁面中的一個連接，咱們給div綁定tap事件：

$('#mengceng').on('tap',function(){
$('#mengceng').hide();
});

　　咱們點擊蒙層時 div正常消失，可是當咱們在a標籤上點擊蒙層時，發現a連接被觸發，這就是所謂的點透事件。

　　分析緣由：

　　touchstart 早於 touchend 早於 click。亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說咱們tap觸發以後蒙層隱藏，此時click尚未觸發，300ms以後因爲蒙層隱藏，咱們的click觸發到了下面的a連接上。
　　解決辦法：
　　1 儘可能都使用touch事件來替換click事件。
　　2 阻止a連接的click的preventDefault

　　點透資料：http://segmentfault.com/q/1010000000691822

3、移動端touch事件問題，在andriod4.0

　　移動端touch事件：
　　　　touchstart //當手指接觸屏幕時觸發
　　　　touchmove //當已經接觸屏幕的手指開始移動後觸發
　　　　touchend //當手指離開屏幕時觸發
　　　　touchcancel//當某種touch事件非正常結束時觸發
　　這4個事件的觸發順序爲：
　　　　touchstart -> touchmove -> touchend ->touchcancel

　　對於某些android系統touch的bug:

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

　　或者經過在touchmove阻止默認行爲preventDefault，這裏就會致使要經過js來實現頁面的滾動：

//發如今android4.0以上的webkit瀏覽器touchmove事件只觸發一次,加event . preventDefault()就能夠,可是這裏就致使只能經過js來實現頁面的滾動
addEventListener("touchmove",function(e){
    e.stopDefault(e);    
},false)

4、 html5重力感應事件

　　　這個不是什麼問題，我只是以爲好，因此說一下，當回搬運工，簡單的搖一搖案例。

if (window.DeviceMotionEvent) { 
                 window.addEventListener('devicemotion',deviceMotionHandler, false);  
        } 
        var speed = 30;//speed
        var x = y = z = lastX = lastY = lastZ = 0;
        function deviceMotionHandler(eventData) {  
          var acceleration =event.accelerationIncludingGravity;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
                    //簡單的搖一搖觸發代碼
                    alert(1);
                }
                lastX = x;
                lastY = y;
                lastZ = z;
        }

　　關於deviceMotionEvent是HTML5新增的事件，用來檢測手機重力感應效果具體可參考：

　　http://w3c.github.io/deviceorientation/spec-source-orientation.html

4、多音頻的問題

　　咱們知道，ios設備能夠多音頻支持，可是andriod不支持多音頻，不少時候作法每每是咱們先靜止背景音樂，而後去播放另外一音樂，感受上實現多音頻。

　　這裏你們也能夠嘗試第三方插件：

　　＊優先使用 Web Audio API
　　＊SoundJS 等音頻處理庫

5、橫屏監測

　　樣式判斷

//橫屏
@media only screen and (orientation: landscape) {
    .warn_wp {
        display: block
    }
}

//豎屏
@media only screen and (orientation: portrait) {
    .warn_wp {
        display: none
    }
}

　　腳本判斷：

//橫屏監聽
var updateOrientation = function(){
	var $landscapeWrap = $('.landscape_wrap');
	if(window.orientation === -90 || window.orientation === 90){
			$landscapeWrap.show();
		}else{
			$landscapeWrap.hide();
		}
	}
}
window.orientationchange = updateOrientation;

經典材料：

　　meta標籤大全 http://segmentfault.com/blog/ciaocc/1190000002407912

　　使用border-image實現相似iOS7的1px底邊：https://github.com/AlloyTeam/Mars/blob/master/solutions/border-1px.md

　　devicePixelRatio：http://imququ.com/post/devicepixelratio-and-border-width.html

　　移動問題小結：http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/