移動端知識小匯

一.css部分

1.用transition做動畫時，變形儘量通過transform來實現，而不是用height，width等屬性。transform可明顯減少重繪、重畫

1.meta標籤

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
移動端加上這個標籤纔是真正的自適應，不加的話，假如你把一個980px寬度(手機端常規是980)的PC網頁
放在手機上顯示，倒也能正常顯示不出現滾動條，不過是移動設備對頁面 做了縮小優化，所以字體等都相應縮小了
（980px是相對於手機像素的，我的是超過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

2.圖片尺寸
做全屏顯示的圖片時，一般爲了兼容大部分的手機，圖片尺寸一般設爲640*960（我是覺得這個尺寸好，也看不少的圖片也是這個尺寸，視情況而定）

3.去除webkit的滾動條

element::-webkit-scrollbar{
   display: none;
}
如果要去除全部的，就把`element`去掉
同時這個屬性可讓在`div`裏的滾動如絲般順滑：`-webkit-overflow-scrolling : touch`;

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

-webkit-appearance: none;
border-radius: 0

5.placeholder元素樣式的修改

input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

6.不想讓按鈕touch時有藍色的邊框或半透明灰色遮罩（根據系統而定）

-webkit-tap-highlight-color:rgba(0,0,0,0);

7.在移動端做動畫效果的話，如果通過改變絕對定位的top，或者margin的話做出來的效果很差，很不流暢，而使用css3的transition、transform或者animation的效果將會非常棒（這一方面IOS比android又要好不少）。
如果用**3d（translate3d）來實現動畫，會開啓GPU加速，動畫會更加流暢，但硬件配置差的安卓用起來會耗很多性能

8.使用圖片時，會發現圖片下總是有大概4px的空白，（原因據說圖片是inline，觸發baseline什麼的。。。）常用解決方法有

img{display:block}；
img{vertical-align:top}

也可取其他幾個值，視情況而定
其他解決辦法見此

9.關於使用彈性盒子box佈局
暫時有三種方案：

display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 過渡版本
display:-webkit-flex; // 最新的版本

我暫時使用的是 display:-webkit-box;暫時只有這個的兼容性最好，flex是最好用，還可以如float一樣排多個元素時自動換行，只是兼容性還太差，（即使是第一種，在火狐下兼容性也不是很好）
對於第一種常見用法是：

    <ul class="box">
        <li class="box_flex">1</li>
        <li class="box_flex">2</li>
        <li class="box_flex">3</li>
    </ul>
    .box {
        display: -webkit-box;
        -webkit-box-align: center; // 設置裏面的元素垂直居中 
        -webkit-box-pack: center; // 設置水平居中
    }
    .box .box_flex1 {
        box-flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        display: block;
        width: 0;
    }

要想三個li元素平分box的寬度，width:0是關鍵（在這個坑裏陷了好久，直到偶然的一次設置了width：0突然就好了，後來在天貓上也看到了同樣的設置width:0）
彈性佈局其他詳解可見此

使用 a 標籤的話，儘量讓 a 標籤 block ，儘量讓用戶可點擊區域最大化
對兩個div使用了transform之後，div下的z-index有時就會失效，我遇到過，但沒去認真探究，只是把z-index提高就好了，如果遇到這個問題的，詳細可以看這
在iOS中，當你點擊比如 input 準備輸入時，虛擬鍵盤彈出，整個視窗的高度就會變爲減去鍵盤的高度，加入你在底部有fixed的元素比如btn，這個元素就會跑上來，一般都不會太美觀。我是當focus時就把它設爲absolute，視情況而定，也有比如顯示一個新的層，將含有fixed按鈕的那一層隱藏的情況等等。

另外一種情況（一般在頁面內容很少時iphone5及以上常發生），當輸入框彈出時fixed元素擠到輸入框上，當輸入框消失時，fixed元素並沒有隨着輸入框的消失而回到底部，這是因爲整個視窗的高度還保持在減去鍵盤的高度，需要手動去觸發讓視窗高度回到正常，然後試了很多方法都沒成功，後來的方案是輸入框消失時給頁面加隱形的很大的padding比如1000px並在30ms後改爲正常，具體可看這移動端IOS關於fixed元素的問題

禁止用戶選中文字 -webkit-user-select:none
當把input設爲 width:100%時，有時可能會遇到input的寬度超出了屏幕，這時可對input加一個屬性 box-sizing:border-box

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

做一個方向箭頭比如 “>” 時，可以用一個正方形的div，設置border:1px 1px 0 0；然後rotate(45deg)，這樣就省去了一個圖片
CSS權重：style是1000，id是100，class是10，普通如li、div和僞類是1，通用如*是0；
使用rem時，設某個div比如的height:3rem;line-height:1.5rem;overflow:hidden;時，在某些android手機上可能會出現顯示不止兩行,第三行會顯示點頭部。解決：利用js獲取文字line-height再去設置div高度
使用background時，background-position裏使用了比如center left後不能再加具體的數值去定位，比如center 10px left（暫時兼容性差）

19.使用rem佈局時，由於webkit支持的最小字體大小是12px，所以使用html使用62.5%實際是12px，這樣很難計算，我的做法是設置成625%即100px，然後1rem就相當於100px

20.移動端字體使用 font-family: Helvetica,sans-serif;我看這也是天貓使用的

在iphone原生鍵盤上用keyup統計字符數時，系統不會自動監控你選擇文字的事件，比如打了多個拼音，可能選擇的實際文字比輸入的字符數多或者少，但無法在用戶確定自己的輸入時監控到keyup（其他事件也一樣）判斷字符數。改成input事件就可以了

22.實現毛玻璃效果，透過背景看其他元素模糊，自身元素不模糊。

-webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(0,0,0,0.5);

這個效果暫時只有IOS9上的safari可以。
用css3的blur效果的話，是整層元素全部模糊，而透過模糊層看其他的元素不模糊

如果需要展示小於12px的文字，用transform:scale(%);它將元素縮小，但本身應該佔的空間並不會變小，所以比如要元素居左對齊的話，還需設置translateX
在移動端對input框使用disabled屬性，會導致元素裏面value值在頁面上被隱藏看不見，可以對元素使用css3效果pointer-event:none，意思就是此元素對鼠標事件無效

二.js部分

如果使用jquery綁定touch事件的話，獲取touchstart，touchmove的觸點座標用 e.originalEvent.targetTouches[0].pageX，

獲取touchend則用 e.originalEvent.changedTouches[0].pageX

利用style獲取獲取transform的rotate值
parseInt(/rotateX((.*?))/.exec(getALL.style.webkitTransform)[1])

如果頁面一開始沒有style值，rotate是寫在CSS裏的，需要用到getComputedStyle，具體請看這裏
有些版本的iphone4中， audio和video默認播放事件不會觸發，比如使用window.onload或計時器等都不能觸發播放，必須用JS寫事件讓用戶手動點擊觸發纔會開始播放，比如
```
$(document).one('touchstart',function(){
    audio.play();
})
```
想要在touchmove:function(e,參數一)加一個參數，結果直接使用e.preventDefault()就會 e 報錯，處理方法爲

touchmove:function(e,參數一){
　　var e=arguments[0]
```
e.preventDefault()
```
}
移動端的一些小頁面可能沒必要用到zepto.js這些工具庫，就可以使用一些新一點的api，比如選取元素用querySelector(".class #id")和querySelectorAll(".class element"),操作class可以用classList
點擊一個元素時，使用touchstart會立即觸發，而使用click則用有大概0.3s的延遲

想模擬一個立即觸發的點擊事件有兩種方法，fastclick.js和zepto.js裏的tap事件。
不過zepto的tap事件有一個事件穿透的問題。假如你tap一個彈出層元素（這個元素遮罩了一個a標籤），這個元素立即消失，這樣由於上述的0.3s延遲tap事件就會傳遞給a標籤成click事件造成a標籤跳轉。
以上面的例子來說，解決方案視情況而定：
① tap時讓遮罩漸隱消失，這個過程超過400ms就不會穿透到下一層去了
② 在touchend事件回調中加入preventDefault, 並在下一層中加上pointer-events:none。（這個沒用過）
③ 有的時候比如彈出一個iphone上滑動出來的層，點擊黑色半透明區域彈出層消失，這種可以在黑色區域綁定touchend也是和tap差不多的效果

當彈窗出現時，想禁止屏幕的滑動，給那個遮罩層添加touchmove事件即可，用e.preventDefault()會阻止的scroll，click等事件，消失時再off掉，
```
$(".body_cover").on("touchmove", function(e) {
    e.preventDefault();
});
```
使用input file上傳文件時，可以指定接受的類型，accept="image/png,image/jpeg,image/gif" ，同時在android上默認不能使用相機，可以加capture="camera"

同時，由於原生的樣式不好看，可以通過設置input的display:none,然後使用id.click()去觸發input元素的點擊。

9.給元素加:active僞類時，如果要求高，兼容性好的話，就得用js監控touchstart然後加相應的class


```
 $(document).on("touchstart", function(e) {
        var target = $(e.target);
        if (target.hasClass("is_hover")) {
            target.addClass("hover_css");
        }
    });
```

三、微信部分

判斷是否來自微信瀏覽器

function isFromWeiXin() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    }
    return false;
}

判斷手機的類型

var user="";
        if (/android/i.test(navigator.userAgent)){
    　　      //  android
            user="1";
        }
        if (/ipad|iphone|mac/i.test(navigator.userAgent)){
            //  ios
            user="0";
        }

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

4.微信jssdk裏預覽圖片接口，圖片的url不能填base64編碼，ios上會很卡，估摸着微信得卡個5秒左右纔打得開，而android上壓跟就卡住或者一直卡在讀取圖片界面

5.微信當在輸入框裏輸入消息時，會提示警示框不要輸入qq密碼等，這個可以在公衆平臺的功能設置的業務域名設置

6.微信裏假如頁面一使用ajax獲取數據，當你進入下一頁面再按返回鍵返回頁面一的時候，有些情況不會去請求ajax數據，會使用緩存，然而ajax來的數據又並沒有存在緩存裏。要設置cache:false（iphone、android的某些手機都可能出現）

7.在微信js config的時候，如果URL的參數有如?a={"param": "1"},會導致簽名失敗。給參數用encodeURIComponent編碼後再傳過去也是失敗！研究了好久。（後臺代碼沒做任何修改，只在我前端修改代碼）。所以最後還是使用了?param=1這樣的格式

移動端知識小匯

一.css部分

二.js部分

三、微信部分

win11關閉自動檢測病毒刪文件

移動端知識小匯

算法系列（16）Leetcode 387 First Unique Character in a String

算法系列（15）LeetCode 171

算法系列（11）LeetCode136 Single Number

算法系列（10）LeetCode520 Detect Capital

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結