移動端那些事兒

移動端知識點~

1.

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

說明：

width = [pixel_value | device-width ] 指定viewport的大小， 如device-width指的是設備的大小
initial-scale = [value] 初始的縮放比例
maximum-scale = [value] 允許用戶縮放到的最大比例
minimum-scale = [value] 允許用戶縮放到的最小比例
user-scalable = [yes | no] 用戶是否允許縮放 默認值爲yes 如果設置爲no 那麼maximum-scale|minimum-scale設置的值就不會起作用了 取值範圍0.01–10
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 設置屏幕密度爲高頻、中頻、低頻

瞭解更多關於VIEWPORT

2.

<meta http-equiv="Cache-Control" content="no-siteapp" />

說明：禁止百度轉碼

3.

<a href="tel:123456">123456</a>    // 開啓電話功能
<a href="sms:123456">123456</a>    // 開啓短信功能

4.

<!-- 去掉ios系統中元素被觸摸的時候產生的半透明灰色遮罩層 -->
a, input, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

<!-- 去除部分安卓系統點擊點擊鏈接出現邊框或者半透明灰色遮罩的情況 -->
a, input, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-modify: read-write-plaintext-only;
}

5.

<!-- 更改默認表單輸入框placeholder的顏色值 -->
input:-webkit-input-placeholder {
    color: #ddd;
}

input:focus::-webkit-input-placeholder {
    color: #eee;
}

6.

<!-- 關閉iOS鍵盤首字母自動大寫 -->
<input type="text" autocapitalize="off" />

7.

<!-- 當移動設備橫豎屏進行切換的時候， 文本的大小會重新計算進行相應的縮放，以下代碼就是禁止這種情況 -->
html {
    -webkit-text-size-adjust: 100%;
}

8.

<!-- 清除webkit表單元素默認外觀 -->
input, textarea {
    -webkit-appearance: none;
}

9.

<!-- 移動端禁止選中內容 -->
.xxx {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

10.

<!-- 禁止用戶長按圖片拷貝和保存圖片的操作 -->
img {
    -webkit-touch-callout: none;
}

11.

<!-- 消除transition閃屏 -->
.xxx {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

12.

<!-- 開啓CPU加速 -->
.xxx {
    [-webkit-|-moz-|-ms-]transform: translate3d(0, 0, 0);
}

13.

<!-- 去除Android平臺中對郵箱地址的識別 -->
<meta content="email=no" name="format-detection" />

14.

<!-- 獲取滾動條的值 -->
安卓：

document.scrollTop/document.scrollLeft

IOS:

window.scrollY/window.scrollX

15.

<!-- 頂部狀態欄背景色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

16.

<!-- 設置緩存 -->
<meta http-equiv="Cache-Control" content="no-cache" />

未完待續……