移动端那些事儿

移动端知识点~

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" />

未完待续……