移动端 一些注意事项

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

width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

<meta content="yes" name="apple-mobile-web-app-capable">

这meta的作用就是删除默认的苹果工具栏和菜单栏。

<meta content="black" name="apple-mobile-web-app-status-bar-style">

作用是控制状态栏显示样式

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

<meta name="msapplication-tap-highlight" content="no">

关闭iOS键盘首字母自动大写

<input type="text" autocapitalize="off" />

禁止文本缩放

html {
-webkit-text-size-adjust: 100%;
}

移动端如何清除输入框内阴影

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

忽略页面的数字为电话，忽略email识别

<meta name="format-detection" content="telephone=no, email=no"/>

快速回弹滚动

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

移动端禁止选中内容

-webkit-user-select: none;

移动端取消touch高亮效果

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

如何禁止保存或拷贝图像

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

PS：需要注意的是，该方法只在 iOS 上有效。


设置input里面placeholder字体的大小
::-webkit-input-placeholder{ font-size:10pt;}


input[type=input]{-webkit-appearance:none;}移除ios的样式，但这个属性存在bug，会导致iso无法获取checkbox值，给这个元素重新赋上input[type=checkbox]{-webkit-appearance:checkbox;}就不会报错了。


消除transition闪屏
.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}