摘要：前言本來是打算寫寫怎么使用進行移動端的布局的然后前面還加些像素基本知識鋪墊后面又加了些屬性概念最后還來些常見布局問題和系統樣式果然排版也是門高深學問這里有些自己寫的有些看完之后總結出來的還有些別人那里搬來的順帶會送上飛機票告訴你們來源在哪

本來是打算寫寫怎么使用 lib-flexible 進行移動端的布局的, 然后前面還加些像素基本知識鋪墊, 后面又加了些 CSS 屬性概念, 最后還來些常見布局問題和系統樣式 bug, 果然排版也是門高深學問, 這里有些自己寫的, 有些看完之后總結出來的, 還有些別人那里搬來的, 順帶會送上飛機票告訴你們來源在哪里, 他們會更加仔細, 畢竟我只是簡明扼要的寫結論.

因為知識點太多, 我沒有全都碰到過, 所以最后的一些樣式解決辦法是覺得有用寫出來的, 沒試過, 以后如果還有遇到其他問題或者看到別人有意思的方案也會補充進來.

最后, 這文章我已經轉成簡體字了, 應該不會再有人說看的吃力了吧.

相比 PC 端, 移動端怎么適配不同尺寸的屏幕?

為什么同一套代碼, 有些看起來很清晰, 有些看起來很模糊?

除了響應式之外有一步到位的布局方法么?

為什么樣式沒寫錯, 有些手機用起來就是不正常?

怎么解決遇到的一些亂七八糟沒有邏輯的 bug?

設備的屏幕上能用來顯示我們的網頁的那一塊區域, 而移動端還提供了兩個 viewport:

visual viewport(虛擬視口):

可以改變大小或形狀, 當前屏幕上顯示的頁面的一部分

通過 window.innerWidth/Height 獲取, 會隨著頁面縮放而變化

layout viewport(布局視口):

不會改變大小或形狀, 可以比可視化的 viewport 寬得多, 并且包含出現在屏幕上的元素

通過 document.documentElement.clientWidth/Height 獲取. 在 Android 2, Oprea mini 和 UC 8 中無法正確獲取

不需要用戶縮放和滾動就能正常的查看網站的所有內容, 顯示的文字大小合適, 保證同樣的網站在不同分辨率的設備上看起來都是一樣或差不多的.

1) 渲染: 將整個頁面渲染在一個 layout viewport 中, 以保證頁面排版正確;

2) 縮放: 將整個 layout viewport 縮放到 visual viewport 大小, 以保證頁面在手機屏幕上被完整顯示出來;

公式表示就是: visual viewpor = layout viewport * scale;

例如你在手機上訪問一個 PC 頁面, 手機當前展示區域就是 visual viewport, 但是整個 PC 頁面是很大的, 往往屏幕是顯示不完, 所以會出現滾動條給你滑動(固定值排版的話), 整個 PC 頁面的尺寸就是 layout viewport 了, 上面說 visual viewport 可以改變大小或形狀, 意思是你可以通過旋轉屏幕或放大縮小改變顯示的頁面.

顯示設備中一個最微小的物理部件. 每個像素可以根據操作系統設置自己的顏色和亮度. 正是這些設備像素的微小距離欺騙了我們肉眼看到的圖像效果.

可以認為是計算機坐標系統中的一個點, 這個點代表一個可以由程序使用并控制的虛擬像素(比如 CSS 像素), 然后由相關系統轉換為物理像素.

公式表示就是: CSS 像素 = 設備獨立像素 = 邏輯像素.

用于頁面布局的抽象單位, 用來精確度量網頁上的內容, 在不同的設備或不同的環境中, css 中的 1px 所代表的設備物理像素的長度可能是不同的

即每英寸屏幕所擁有的像素數, 像素密度越大, 顯示畫面細節就越豐富,

公式表示就是: 像素密度 = 對角線分辨率 / 屏幕尺寸.

物理像素與邏輯像素之間的比例.

公式表示就是: 設備像素比(dpr) = 物理像素(pp) / 設備獨立像素(dip).

在 JavaScript 中, 可以通過 window.devicePixelRatio 獲取到當前設備的 dpr. 而在 CSS 中, 可以通過 - webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 進行媒體查詢, 對不同 dpr 的設備, 做一些樣式適配

一切的起源來自于 iphone4 的誕生, 當時它使用一種新的屏幕的顯示技術 Retina(視網膜), 它將 640x960 的分辨率壓縮到一個 3.5 英寸的顯示屏, 像素密度達到 326 像素 / 英寸(ppi). 聲稱當一個顯示屏像素密度超過 300ppi 時, 人眼就無法區分出多帶帶的像素, 顯示設備清晰度已達到人視網膜可分辨像素的極限.

盡管兩者 CSS 像素所呈現的物理尺寸是一致的, 但在普通屏幕下 1 個 CSS 像素對應 1 個物理像素, 而在 Retina 屏幕下, 1 個 CSS 像素對應的卻是 4 個物理像素. 靠提升單位面積屏幕的像素數量, 即像素密度來提升分辨率.

iphone 常見如下:

(更詳細內容請看 The Ultimate Guide To iPhone Resolutions)

重點來了, 在舊的布局方式困難重重, 新的屬性方法短時間不被主流瀏覽器大范圍兼容的情況下, 手淘團隊出了 lib-flexible.

先在 < html > 元素上增加一個 data-dpr 屬性, 以及一個 font-size 樣式. JS 會根據不同的設備添加不同的 data-dpr 值和對應的 font-size 的值. 開發時候通過把設計稿做些計算轉換成 rem 單位來設置. 他們會根據 html 元素的 font-size 值做相應的計算, 從而實現屏幕的適配效果.

在頁面所有資源加載前執行, 避免在渲染過程或之后再次重新計算樣式;

像字體, 某些固定尺寸的樣式可以直接使用 px;

(更詳細內容請看使用 Flexible 實現手淘 H5 頁面的終端適配 https://www.w3cplus.com/mobil... )(還有一些常用的居中布局, 經典布局方法和優缺點可以參考我之前寫的文章頁面基礎布局相關知識 --- 居中 & 經典布局)

這里只會列出一些常用的標簽, 多帶帶某些瀏覽器或低版本系統不會列出來.

限制移動端頁面視口寬度縮放等

移動端必備標簽!

很多時候真的只是文本文字, 也會被當作電話號碼處理

默認值為default（白色），可以定為black（黑色）和black-translucent（黑色半透明.）

black-translucent 狀態欄背景是黑色半透明. 如果設置為 default 或 black , 網頁內容從狀態欄底部開始. 如果設置為 black-translucent , 網頁內容充滿整個屏幕, 頂部會被狀態欄遮擋.

元素選擇符: 1

class 選擇符: 10

id 選擇符: 100

內聯樣式: 1000

!important 優先級最高

如果優先級相同, 則選擇最后出現的樣式;

繼承得到的樣式的優先級最低;

嵌套選擇器優先級是相加, 例如: #A .B = 100 + 10 = 110;

合并

margin 在垂直方向會合并, 其值為兩者最大值, 水平方向不合并;

如果元素內容為空, 自身 margin 垂直方向也會合并, 其值為兩者最大值;

父元素如果沒有 padding, border 等屬性時, 其子元素的 margin 上下方向會和父元素的 margin 進行重疊;

與其他元素相交定位

位于普通文檔流中元素, 只會覆蓋顏色, 不會覆蓋文字;

relative 下, 會完全覆蓋前一個元素并影響后面元素一起移動;

absolute 下, 元素脫離了普通文檔流并對其他元素沒有影響;

對于 float 元素, 可以通過負值進行覆蓋;

(原本想寫些例子, 但是太麻煩, 可能還得截圖標注, 就干脆不寫了.)

先說說 float 的特性:

浮動元素會脫離正常文檔流, 一直平移到碰到容器邊框或者另一個浮動元素;

浮動元素會根據上一個元素的類型判斷位置:

如果是浮動元素, 則跟隨他浮動, 放置不下就擠到下一行展示;

如果是標準流元素, 則浮動元素的相對垂直高度不變, 頂部和上一個底部對齊;

浮動帶來的問題:

父元素的高度無法被撐開, 影響與父元素同級的元素

與浮動元素同級的非浮動元素 (內聯元素) 會跟隨其后

若非第一個元素浮動, 則該元素之前的元素也需要浮動, 否則會影響頁面顯示的結構.

綜合寫法:

.clearfix:after {
  content: ""; // 設置內容為空  
  height: 0; // 高度為 0  
  line-height: 0; // 行高為 0  
  display: block; // 將文本轉為塊級元素 
  visibility: hidden; // 將元素隱藏  
  clear: both; // 清除浮動
}
.clearfix {
  zoom: 1; // 為了兼容 IE;
}

display 屬性規定元素應該生成的框的類型;

overflow 屬性規定當內容溢出元素框時發生的事情.

position 屬性規定元素的定位類型;

float 屬性是一種布局方式, 定義元素在哪個方向浮動.

首先 overflow 怎么處理溢出顯示, 跟其他三者無沖突影響的;

如果 display: none 此元素不會被顯示. 否則就是規定元素應該生成的框的類型;

如果脫離文檔流的話 position:absolute/fixed 優先級高于浮動 float, 并且 display 只能影響子元素繼承屬性;

float 或者 absolute 定位的元素, display 只能是塊元素或表格;

當按百分比設定一個元素的寬度時, 它是相對于父容器的寬度計算的, 但是, 對于一些表示豎向距離的屬性, 例如 padding-top , padding-bottom , margin-top , margin-bottom 等, 當按百分比設定它們時, 依據的也是父容器的寬度, 而不是高度.

偽類 (Pseudo-classes) :active, :focus, :hover, :link, :visited, :first-child, :lang 等, 用于向某些選擇器添加特殊的效果.

偽元素 (Pseudo-elements) :first-letter, :first-line, :before, :after 等, 用于向某些選擇器設置特殊效果.

偽類能獲取不能被常規 CSS 選擇器獲取的信息, 可以算是選擇器的一種補充吧, 每個選擇器可以同時使用多種偽類.

偽元素能在 DOM 樹中創建一些存在于文檔語言里的抽象元素.

定義: BFC(Block formatting context)直譯為 "塊級格式化上下文". 它是一個獨立的渲染區域, 只有 Block-level box 參與, 它規定了內部的 Block-level Box 如何布局, 并且與這個區域外部毫不相干.

w3c 規范中的 BFC 定義:

浮動元素和絕對定位元素, 非塊級盒子的塊級容器(例如 inline-blocks, table-cells, 和 table-captions), 以及 overflow 值不為 "visiable" 的塊級盒子, 都會為他們的內容創建新的 BFC(塊級格式上下文).

在 BFC 中, 盒子從頂端開始垂直地一個接一個地排列, 兩個盒子之間的垂直的間隙是由他們的 margin 值所決定的. 在一個 BFC 中, 兩個相鄰的塊級盒子的垂直外邊距會產生折疊.

在 BFC 中, 每一個盒子的左外邊緣 (margin-left) 會觸碰到容器的左邊緣(border-left)(對于從右到左的格式來說, 則觸碰到右邊緣).

BFC 布局規則:

內部的 Box 會在垂直方向, 一個接一個地放置;

Box 垂直方向的距離由 margin 決定. 屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊;

每個元素的 margin box 的左邊, 與包含塊 border box 的左邊相接觸(對于從左往右的格式化, 否則相反). 即使存在浮動也是如此;

BFC 的區域不會與 float box 重疊;

BFC 就是頁面上的一個隔離的獨立容器, 容器里面的子元素不會影響到外面的元素. 反之也如此;

計算 BFC 的高度時, 浮動元素也參與計算;

觸發條件:

根元素, 即 html;

float 的值不為 none(默認);

overflow 的值不為 visible(默認);

display 的值為 inline-block,table-cell,table-caption;

position 的值為 absolute 或 fixed;

(更詳細內容請看前端精選文摘: BFC 神奇背后的原理 )

(實在復雜, 更詳細內容請看 CSS 大神張鑫旭的深入理解 CSS 中的層疊上下文和層疊順序 , 下面都是我根據他的文章簡要記錄下來的)

層疊上下文(stacking context): 是 HTML 中的一個三維的概念. 如果一個元素含有層疊上下文, 我們可以理解為這個元素在 z 軸上就 "高人一等".

層疊水平(stacking level): 決定了同一個層疊上下文中元素在 z 軸上的顯示順序.

層疊順序(stacking order): 表示元素發生層疊時候有著特定的垂直顯示順序.

注意: 上面的層疊上下文和層疊水平是概念, 而這里的層疊順序是規則.

(原諒我盜圖)

特別說明:

普通元素的層疊水平優先由層疊上下文決定, 某些情況下 z-index 可以影響層疊水平, 但是, 只限于定位元素以及 flex 盒子的子元素;

層疊準則:

當在同一個層疊上下文領域具有明顯的層疊水平標示的時候, 如 z-indx, 層疊水平值大的那一個覆蓋小的那一個;

當元素的層疊水平一致, 層疊順序相同的時候, 在 DOM 流中處于后面的元素會覆蓋前面的元素;

層疊上下文的特性:

層疊上下文的層疊水平要比普通元素高;

層疊上下文可以阻斷元素的混合模式(普通元素的層疊水平優先由層疊上下文決定);

層疊上下文可以嵌套, 內部層疊上下文及其所有子元素均受制于外部的層疊上下文(父元素的層級決定了子元素之間的層級比較);

每個層疊上下文和兄弟元素獨立, 也就是當進行層疊變化或渲染的時候, 只需要考慮后代元素;

每個層疊上下文是自成體系的, 當元素發生層疊的時候, 整個元素被認為是在父層疊上下文的層疊順序中;

層疊上下文的創建:

根層疊上下文:

頁面根元素 html;

定位元素與傳統層疊上下文:

對于包含有 position:relative/position:absolute 的定位元素, 以及 FireFox/IE 瀏覽器 (不包括 Chrome 等 webkit 內核瀏覽器) 下含有 position:fixed 聲明的定位元素, 當其 z-index 值不是 auto 的時候, 會創建層疊上下文;

CSS3 與新時代的層疊上下文:

z-index 值不為 auto 的 flex 項(父元素 display:flex|inline-flex).

元素的 opacity 值不是 1.

元素的 transform 值不是 none.

元素 mix-blend-mode 值不是 normal.

元素的 filter 值不是 none.

元素的 isolation 值是 isolate.

will-change 指定的屬性值為上面任意一個.

元素的 - webkit-overflow-scrolling 設為 touch.

層疊上下文之間的順序:

如果不依賴 z-index, 則 z-index:auto 可看成 z:index:0 級別;

元素一旦成為定位元素, 其 z-index 就會自動生效就是默認的 auto, 也就是 0 級別, 根據上面的層疊順序表, 就會覆蓋 inline 或 block 或 float 元素;

不支持 z-index 的層疊上下文元素天然 z-index:auto 級別, 也就意味著, 層疊上下文元素和定位元素是一個層疊順序的, 遵循的是 "后來居上" 準則

如果依賴 z-index, 則其層疊順序由 z-index 值決定.

z-index 勝者為王;

.title {}
.title h1 {}
.title h1 span {}

要找到. title .h1 span 選擇器:

找到父節點 title;

在父節點之下找 h1;

再找到 h1 下面的 span;

看起來順利解析完畢, 然后來看看再看看稍微復雜點的

.title {}
.title h1 {}
.title h2 {}
.title h1 em {}
.title h1 span {}

要找到. title .h1 span 選擇器:

找到父節點 title;

在父節點之下找 h1(第三行不符合);

再找到 h1 下面的 span(第四行不符合);

在這里也能大概看得出, 如果是從左往右解析 CSS 選擇器的話, 每次發現不符合規則的都要進行回溯, 不僅浪費時間而且浪費性能, 所以上面的說法是我誤導不懂的人的, 實際上瀏覽器 CSS 選擇器的解析規則是從右往左的. 然后我們再看看上面的解析規則.

找到子節點 span;

在 span 的父節點上找 h1;

在 h1 的父節點上找 title;

整個解析下來, 每一步都能過濾掉些不符合規則的分支情況, 直到找到根元素或滿足條件的匹配規則的選擇器就結束這個分支的遍歷.

最后建議:, 不管瀏覽器怎么解析, 我剛開始學前端的時候就經常看到那么一句話: 盡量避免深層嵌套 CSS, 因為尋找選擇器和計算最終樣式都會受影響的.

多數顯示器默認頻率是 60Hz, 即 1 秒刷新 60 次, 所以理論上最小間隔為 1/60＊1000ms = 16.7ms.

原因: 因為手機會通過 300ms 的延遲判斷用戶是單擊還是雙擊屏幕決定執行哪種手勢行為.

解決方案:

網頁頭部 meta 標簽禁用縮放, 為了解決短暫的延遲問題卻要完全禁止用戶手勢縮放行為, 這就過分了;

網頁頭部 meta 標簽設置視口寬度為設備寬度, 優點是只禁用雙擊手勢縮放功能;

指針事件, 是一個新的 web 事件系列, 相應的規范旨在使用一個多帶帶的事件模型, 對所有輸入類型, 包括鼠標 (mouse), 觸摸 (touch), 觸控 (stylus) 等, 進行統一的處理. 其中 touch-action

屬性決定 "是否觸摸操作會觸發用戶代理的默認行為. 這包括但不限于雙指縮放等行為". 但瀏覽器兼容是個問題;

解決庫:

指針事件庫, 就是上面第三個方案的 js 兼容庫;

FastClick.js , 實現原理是在檢測到 touchend 事件的時候, 會通過 DOM 自定義事件立即觸發模擬一個 click 事件, 并把瀏覽器在 300ms 之后的 click 事件阻止掉. 需要注意的是至 2015 年之后的瀏覽器大多數都已經取消了 300ms 的延遲, 再引入的話不僅沒用還可能引起應用 bug;

tap 事件代替 click, 如果你引用的庫或框架有提供的話;

(我發現有個文章深入源碼分析的挺好的, 雖然我沒細看, 有興趣可以看一下[[讀 fastclick 源碼有感] 徹底解決 tap"點透", 提升移動端點擊響應速度](https://github.com/ftlabs/fas... )

原因: 移動端一次點擊會順序觸發 touchstart -> touchmove -> touchend -> tap(如果有) -> click, 并且 click 有 300ms 的滯后性.

舉例: 有一對父子元素, 分別綁定讓自身消失的事件在父元素的 click 和子元素的 touchstart 上, 當點擊子元素會讓子元素自身消失, 過了 300ms 之后才會觸發到 click 事件, 但是子元素已經消失了, click 事件會被順遞派發到下層的父元素讓其也消失.

解決方案:

盡量都使用 touch 事件來替換 click 事件. 例如用 touchend 事件(推薦);

fastclick;

preventDefault 阻止;

延遲一定的時間 (300ms+) 來處理事件 (不推薦);

以上一般都能解決, 實在不行就換成 click 事件;

舉例: 當頁面彈出遮罩的時候依然可以讓頁面滾動.

解決方案:

touchmove 事件監聽加 e.preventDefault()

如果遮罩本身也有滾動條也會被禁止;

body/html 添加 overflow:hidden,height: 100%;

部分機器 / 瀏覽器不行;

頁面的背景還是能夠有滾的動的效果;

滾動位置消失, 需要 js 計算修復;

body.modal-open {position: fixed; width: 100%;}
------------------------------------------------------------
var ModalHelper = (function(bodyCls) {
    var scrollTop; // 在閉包中定義一個用來保存滾動位置的變量
    return {
        afterOpen: function() {
            // 彈出之后記錄保存滾動位置, 并且給 body 添加. modal-open
            scrollTop = document.scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + "px";
        },
        beforeClose: function() {
            // 關閉時將. modal-open 移除并還原之前保存滾動位置
            document.body.classList.remove(bodyCls);
            document.scrollingElement.scrollTop = scrollTop;
        },
    };
})("modal-open");

(從網上看到的方法關于移動端開發中遇到的坑)

這里只會總結部分特殊問題, 太常見的就不提, IE 的不提, 低版本瀏覽器問題不提(主要我也不懂).

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
}
input:focus::-webkit-input-placeholder {
  color: #999;
}

單行文本

p{
    overflow: hidden;/*超出部分隱藏*/
    text-overflow:ellipsis;/* 超出部分顯示省略號 */
    white-space: nowrap;/*規定段落中的文本不進行換行 */
    width: 250px;/*需要配合寬度來使用*/
    border: 1px solid red;
    font-size: 30px;
}

多行文本

p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 250px;
    border: 1px solid red;
    font-size: 30px;　
}

// 豎屏時樣式
@media all and (orientation:portrait){}
// 橫屏時樣式
@media all and (orientation:landscape){}

//設置內嵌的元素在 3D 空間如何呈現: 保留 3D
-webkit-transform-style: preserve-3d;
//設置進行轉換的元素的背面在面對用戶時是否可見: 隱藏
-webkit-backface-visibility:hidden;
//定義 3D 元素距視圖的距離，以像素計
-webkit-perspective: 1000; 

div {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #ff0000;
}

1, maxlength 屬性不會提供任何反饋.

用 js 解決

2, form 提交會默認取整數.

step 屬性規定 < input > 元素的合法數字間隔, 也是通過自帶箭頭增減的數字, 默認為 1

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

打電話給: 10086

發短信給: 10086

第一個功能以 "?" 開頭, 后面的以 "&" 開頭

mailto: 普通郵件

cc: 收件地址后添加抄送地址(Android 存在兼容問題)

bcc: 抄送地址后添加密件抄送地址(Android 存在兼容問題)

subject: 包含主題

body: 包含內容,

如包含文本, 使用 給文本換行

如包含 http(s):// 等的文本自動轉化為鏈接

如內容包含圖片(PC 不支持)

包含多個收件人, 抄送, 密件抄送人, 用分號 (;) 隔開多個郵件人的地址

點擊我發郵件

安卓蘋果常見的問題, 還有些基于系統版本, 瀏覽器版本的不說.

Element {
  background-clip: padding-box;
}

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

Element {
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}

有些機型去除不了, 不使用 a 或者 input 標簽, 直接用 div 標簽

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

Element {
  -webkit-appearance: none;
}

Element {
  border-width: thin;
}

this.value = this.value.replace(/u2006/g, "");

html5 的 oninput 事件代替

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

auto: 使用普通滾動, 當手指從觸摸屏上移開, 滾動會立即停止.

touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開, 內容會繼續保持一段時間的滾動效果. 繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比. 同時也會創建一個新的堆棧上下文.

啟動了硬件加速的特性, 所以滑動起來會非常流暢; 不過會影響性能

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

IOS 有拍照, 錄像, 選取本地圖片功能, 部分 Android 只有選擇本地圖片功能. Winphone 不支持

if (/Android/.test(navigator.appVersion)) {
    window.addEventListener("resize", function() {
        if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
            document.activeElement.scrollIntoView();
        }
    });
}

可以解決絕大數安卓機上面的問題

ios7 + 支持自動播放

支持 Airplay 的設備 (如: 音箱, Apple TV) 播放: x-webkit-airplay="true"

播放視頻不全屏: webkit-playsinline="true"

蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放, 必須由用戶來觸發才可以播放.

audio 元素的 autoplay 屬性在 IOS 及 Android 上無法使用, 在 PC 端正常

audio 元素沒有設置 controls 時, 在 IOS 及 Android 會占據空間大小, 而在 PC 端 Chrome 是不會占據任何空間

解決方法思路: 先通過用戶 touchstart 觸碰, 觸發播放并暫停(音頻開始加載, 后面用 JS 再操作就沒問題了).

document.addEventListener("touchstart", function() {
    document.getElementsByTagName("audio")[0].play();
    document.getElementsByTagName("audio")[0].pause();
});

微信下兼容處理

document.addEventListener(
    "WeixinJSBridgeReady",
    function() {
        music.play();
    },
    false
);

ios10 + 以上, 盡管開發者設置了 user-scalable=no,Safari 還是允許用戶通過手勢來縮放

檢測 touch 相關事件來阻止事件的觸發

window.onload = function () {
  // 同時按下兩個手指
  document.addEventListener("touchstart", function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  var lastTouchEnd = 0;
  // 特別注意 300ms 時差的設置
  document.addEventListener("touchend", function (event) {
    var now = new Date().getTime();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  });
};

fixed 定位

ios 下 fixed 元素容易定位出錯, 軟鍵盤彈出時, 影響 fixed 元素定位

android 下 fixed 表現要比 iOS 更好, 軟鍵盤彈出時, 不會影響 fixed 元素定位

ios4 下不支持 position:fixed

解決方案: 使用 Iscroll , 如:

position 定位

Android 下彈出軟鍵盤彈出時, 影響 absolute 元素定位

var ua = navigator.userAgent.indexOf("Android");
if (ua > -1) {
    $(".ipt")
        .on("focus", function() {
            $(".css").css({ visibility: "hidden" });
        })
        .on("blur", function() {
            $(".css").css({ visibility: "visible" });
        });
}

使用的都是些特殊屬性, 兼容性是個比較大的問題.

新版本谷歌好像取消支持了

-webkit-text-size-adjust: none;

縮小尺寸

-webkit-transform: scale(0.5);

解決縮放后 margin-left 的位移問題

-webkit-transform-origin-x: 0;

解決縮放后 margin-left 的位移問題

-webkit-transform-origin-x: 0;

注意: 放在 body 上會導致頁面縮放失效

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

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

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

input[type=checkbox]::-ms-check,
input[type=radio]::-ms-check {
  display: none;
}

input[type=number]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=text]::-ms-clear {
  display: none;
}

select option {
  direction: rtl;
}

原因是滾動條占據一定的寬度擠壓了頁面布局導致的.

Element {
  margin-left: calc(100vw - 100%);
}

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}