移動端WEB

時間 2019-11-11

標籤移動 web 欄目無線简体版

原文原文鏈接

像素基礎知識css

px：css pixels 邏輯像素，瀏覽器使用的抽象單位html

dp（Android），pt（iOS）：device independent pixels 設備無關像素，邏輯像素web

dpr：devicePixelRatio 設備像素縮放比數組

DPi：打印機每英寸能夠噴的墨汁點（印刷行業）瀏覽器

PPI：屏幕每英寸的像素數量，即單位英寸內的像素密度app

目前，在計算機顯示設備參數描述上，兩者意思表達的是同樣的。框架

計算公式：以 iPhone5 爲例，dom

ppi = √（1136²+ 640²） / 4 = 326 ppiiphone

	ldpi	mdpi	hdpi	xhdpi
ppi	120	160	240	320
默認縮放比	0.75	1.0	1.5	2.0

注意：Retina屏（高清屏）：dpr 都是大於等於 2 。ide

Viewport

width：設置佈局 viewport 的特定值（"device-width"）

initial-scake：設置頁面的初始縮放

minimum-scale：最小縮放

maximum-scale：最大縮放

user-scalable：用戶可否縮放

移動web最佳viewport設置

【佈局viewport】=【設備寬度】=【度量viewport】

Flexbox 彈性盒子佈局

不定寬高的水平垂直居中

1 .myoff-wrapper {
2  position: absolute;
3  top: 50%;
4  left: 50px;
5  transform: translate(-50%, -50%);
6 }

【flexbox版】不定寬高的水平垂直居中

1 .parent {
2  display: flex;
3  justify-content: center;    /*子元素水平居中*/
4  align-items: center;    /*子元素垂直居中*/
5 }

響應式設計

經常使用媒體查詢參數

width —— 視口寬高
height —— 視口寬高
device-width —— 設備的寬度
device-height —— 設備的高度
orientation —— 設備處於橫向（landscape）仍是縱向（portrait）

設計點一：百分比佈局

設計點二：彈性圖片

img {

　　max-width: 100%;

　　height: auto;

}

設計點三：從新佈局，顯示與隱藏

同比例縮減元素尺寸
調整頁面結構佈局
隱藏冗餘的元素

注意：常常須要切換位置元素使用【絕對定位】，減小重繪提升渲染性能。

權衡利弊

利：減小重複開發。
弊：性能不是最優。當一個移動設備訪問時，會下載不一樣設備對應的樣式，其餘樣式是冗餘的。

移動 web 特別樣式處理

高清圖片：在移動 web 頁面上渲染圖片，爲了不圖片產生模糊，圖片的寬高應該用物理像素單位渲染，即 100 * 100 的圖片，應該使用 100dp * 100dop 。

width: (w_value / dpr)px;

height: (h_value / dpr)px

一像素邊框：retina屏幕下的問題。根本緣由：1px 使用 2dp 渲染。解決辦法：scaleY(0.5)。

li {
    /*border-bottom: 0.5px solid #ddd*/
    position: relative;
    padding: 8px 0 8px 15px;
    color: #7c7c7c;
    cursor: pointer;
}
li:before {
    position: absolute;
    top: -1px;
    left: 0;
    content: "";
    width: 100%;
    hieght: 1px;
    border-top: 1px solid #ddd;
    transform: scaleY(0.5);
}

　　另：移動端1像素邊框問題的解決方案

相對單位

em：根據父節點的 font-size 爲相對單位。（多層嵌套時，難以使用）

rem：根據 html 的 font-size 爲相對單位。（建議使用）

1.設置rem 的基值：rem = screen,width / 20 。

2.設置 html 的 font-size 值。

//默認320px

html { font-size: 32px; }

//iphone 6

@media (min-device-width: 375px) { html { font-size: 37.5px; } }

//iphone 6 plus

@media (min-device-width: 414px) { html { font-size: 41.4px; } }

3.width: px / rem; height: px / rem; （rem 表示 rem 的基值）

多行文本溢出

/*單行文本溢出*/
.inaline {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*多行文本溢出*/
.intowline {
    overflow: hidden;

    text-overflow: ellipsis;
    word-break: break-all;

    box-orient: vertical;
    line-clamp: 2;　　//顯示到第二行
}

Touch 基礎事件

觸摸事件

touchstart：手指觸摸屏幕觸發（已經有手指放屏幕上不會觸發）；
touchmove：手指在屏幕上滑動，連續觸發；
touchend：手指離開屏幕是觸發；
touchcancel：系統取消 touch 時觸發（不經常使用）。

觸摸事件的屬性

touches：跟蹤觸摸操做的 touch 對象數組。
targetTouches：特定事件目標的 touch 對象數組。
changeTouches：上次觸摸改變的 touch 對象數組。

每一個 touch 對象包含的屬性

identifier：表示觸摸的惟一 ID。
clientX：觸摸目標在視口中的 x 座標。
clientY：觸摸目標在視口中的 y 座標。
pageX：觸摸目標在頁面中的 x 座標（包含滾動）。
pageY：觸摸目標在頁面中的 y 座標（包含滾動）。
screenX：觸摸目標在屏幕中的 x 座標。
screenY：觸摸目標在屏幕中的 y 座標。
target：觸摸的 DOM 節點目標。

BUG：Android 只會觸發一次 touchstart，一次 touchmove，touchend 不觸發。

解決方案：在 touchmove 中加入 event.preventDefault()。

注意：event.preventDefault() 會致使默認行爲不發生，如 scroll，致使頁面不滾動。

Tap 基礎事件

300 毫秒的故事：移動 web 頁面上的 click 事件響應都要慢 300ms（須要 300ms 的延時來判斷用戶「雙擊」仍是「單擊」）。

自定義 Tap 事件原理：在 touchstart、touchend 時記錄時間和手指的位置，在 touchend 時進行比較，若是手指位置爲同一位置（或容許移動一個很是小的位移值）且時間間隔較短（通常認爲是 200ms），且過程當中不曾處罰過 touchmove 事件，便可認爲觸發了手持設備上的「click」事件，通常稱它爲「tap」事件。通常使用移動框架庫 Zepto.js。

Tap 透傳 BUG：

Tap 透傳的解決方案