web前端 —— 移動端知識的一些總結

一.css部分

1.meta标簽

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

移動端加上這個标簽才是真正的自适應，不加的話，假如你把一個980px寬度(手機端正常是980)的PC網頁放在手機上顯示，倒也能正常顯示不出現滾動條，不過是移動裝置對頁面做了縮小優化，是以字型等都相應縮小了（980px是相對于手機像素的，我的是超過1000px多一些就出現滾動條了，這個沒具體研究）。

關于 initial-scale=1 ，這個參照iphone5的尺寸320568，如果你頁面按照6401136做的話，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

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

）

10.使用

标簽的話，盡量讓

标簽

block

，盡量讓使用者可點選區域最大化

11.對兩個

div

使用了

transform

之後，

div

下的

z-index

有時就會失效，我遇到過，但沒去認真探究，隻是把

z-index

提高就好了

12.在

iOS

中，當你點選比如

input

準備輸入時，虛拟鍵盤彈出，整個視窗的高度就會變為減去鍵盤的高度，加入你在底部有

fixed

的元素比如

btn

，這個元素就會跑上來，一般都不會太美觀。我是當

focus

時就把它設為

absolute

，視情況而定，也有比如顯示一個新的層，将含有

fixed

按鈕的那一層隐藏的情況等等。另外一種情況（一般在頁面内容很少時

iphone5

及以上常發生），當輸入框彈出時

fixed

元素擠到輸入框上，當輸入框消失時，

fixed

元素并沒有随着輸入框的消失而回到底部，這是因為整個視窗的高度還保持在減去鍵盤的高度，需要手動去觸發讓視窗高度回到正常，然後試了很多方法都沒成功，後來的方案是輸入框消失時給頁面加隐形的很大的

padding

比如

1000px

并在

30ms

後改為正常

13.禁止使用者選中文字

-webkit-user-select:none

14.當把

input

設為

width:100%

時，有時可能會遇到

input

的寬度超出了螢幕，這時可對

input

加一個屬性

box-sizing:border-box

關于

box-sizing:border-box

，此屬性是把邊框的寬度和

padding

包含在盒子的高寬中，假如你設定兩個元素

float

且各占

50%

，又都有

border

時，用這個屬性就可以完美地讓它們能顯示在同一行

15.做一個方向箭頭比如 “>” 時，可以用一個正方形的

div

，設定

border:1px 1px 0 0

；然後

rotate(45deg)

，這樣就省去了一個圖檔

16.

CSS

權重：

style

是

，

id

是

，

class

是

，普通如

li

、

div

和僞類是

，通用如

是

；

17.使用

rem

時，設某個

div

比如的

height:3rem;line-height:1.5rem;overflow:hidden;

時，在某些

android

手機上可能會出現顯示不止兩行,第三行會顯示點頭部。解決：利用

js

擷取文字

line-height

再去設定

div

高度

18.使用

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

;我看這也是天貓使用的

21.在

iphone

原生鍵盤上用

keyup

統計字元數時，系統不會自動監控你選擇文字的事件，比如打了多個拼音，可能選擇的實際文字比輸入的字元數多或者少，但無法在使用者确定自己的輸入時監控到

keyup

（其他事件也一樣）判斷字元數。改成

input

事件就可以了

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

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

這個效果暫時隻有

IOS9

上的

safari

可以。用

css3

的

blur

效果的話，是整層元素全部模糊，而透過模糊層看其他的元素不模糊

23.如果需要展示小于

12px

的文字，用

transform:scale(%)

;它将元素縮小，但本身應該占的空間并不會變小，是以比如要元素居左對齊的話，還需設定

translateX

24.在移動端對

input

框使用

disabled

屬性，會導緻元素裡面

value

值在頁面上被隐藏看不見，可以對元素使用

css3

效果

pointer-event:none

，意思就是此元素對滑鼠事件無效

二.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`，具體請看[這裡][5]

3.有些版本的

iphone4

中，

audio

和

video

預設播放事件不會觸發，比如使用

window.onload

或計時器等都不能觸發播放，必須用

JS

寫事件讓使用者手動點選觸發才會開始播放，比如

$(document).one('touchstart',function(){
audio.play();
})

4.想要在

touchmove:function(e,參數一)

加一個參數，結果直接使用

e.preventDefault()

就會

報錯，處理方法為

touchmove:function(e,參數一){
　　var e=arguments[0]
e.preventDefault()
}

5.移動端的一些小頁面可能沒必要用到

zepto.js

這些工具庫，就可以使用一些新一點的

api

，比如選取元素用

querySelector(".class #id")

和

querySelectorAll(".class element")

,操作

class

可以用

classList

6.點選一個元素時，使用

touchstart

會立即觸發，而使用

click

則用有大概

0.3s

的延遲想模拟一個立即觸發的點選事件有兩種方法，

fastclick.js

和

zepto.js

裡的

tap

事件。

不過

zepto

的

tap

事件有一個事件穿透的問題。假如你

tap

一個彈出層元素（這個元素遮罩了一個

标簽），這個元素立即消失，這樣由于上述的

0.3s

延遲

tap

事件就會傳遞給

标簽成

click

事件造成a标簽跳轉。以上面的例子來說，解決方案視情況而定：

①

tap

時讓遮罩漸隐消失，這個過程超過

400ms

就不會穿透到下一層去了

② 在

touchend

事件回調中加入

preventDefault

, 并在下一層中加上

pointer-events:none

。（這個沒用過）

③ 有的時候比如彈出一個

iphone

上滑動出來的層，點選黑色半透明區域彈出層消失，這種可以在黑色區域綁定

touchend

也是和

tap

差不多的效果

7.當彈窗出現時，想禁止螢幕的滑動，給那個遮罩層添加

touchmove

事件即可，用

e.preventDefault()

會阻止的

scroll

，

click

等事件，消失時再

off

掉，

$(".body_cover").on("touchmove", function(e) {
e.preventDefault();
});

8.使用

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");
}
});

三、微信部分

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.如果在網頁裡嵌套一個

iframe

，

src

為其他的網址等，當在微信浏覽器打開時，如果

iframe

裡的頁面過大，則

iframe

的

src

不能加載（具體多大不知道，隻是遇到過）。

4.微信

jssdk

裡預覽圖檔接口，圖檔的

url

不能填

base64

編碼，

ios

上會很卡，估摸着微信得卡個

秒左右才打得開，而

android

上壓跟就卡住或者一直卡在讀取圖檔界面

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

6.微信裡假如頁面一使用

ajax

擷取資料，當你進入下一頁面再按傳回鍵傳回頁面一的時候，有些情況不會去請求

ajax

資料，會使用緩存，然而

ajax

來的資料又并沒有存在緩存裡。要設定

cache:false

（iphone、android的某些手機都可能出現）

7.在微信

js config

的時候，如果

URL

的參數有如

?a={"param": "1"}

,會導緻簽名失敗。給參數用

encodeURIComponent

編碼後再傳過去也是失敗！研究了好久。（背景代碼沒做任何修改，隻在我前端修改代碼）。是以最後還是使用了

?param=1

這樣的格式

web前端 —— 移動端知識的一些總結

一.css部分

二.js部分

三、微信部分

繼續閱讀

移動端開發同後端互動安全機制記錄前言：需求：具體流程如下：

移動端開發的簡單适配方案

Android安卓4.0以下，fastclick觸發兩次？

iscroll上拉加載更多下拉重新整理

iscroll4中滑動速度的修改

關于移動端上拉加載下拉重新整理我的的了解和做法

移動端适配問題，解決方案

Hammer.js 移動裝置觸摸手勢js庫

讀書筆記-ListView與RecyclerView的使用讀書筆記-ListView與RecyclerView的使用

Chord的flutter踩坑小筆記之flutter安裝

Flutter之布局的相關元件

移動端開發：使用搜尋框時，鍵盤可以出現"搜尋"倆字，并且可以"回車(Enter)"開始搜尋......

移動端頁面在ios中圖檔不顯示

iOS中 new Date() 傳回 NaN

移動端開發-響應式布局