HEAD区域篇：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
PS：语名说明
其中 width=device-width 是设置视窗宽度为设备视窗宽度，还可以固定宽度，例如： width=640 则是640px的宽度（常见于微信）；
initial-scale=1.0 ：设置缩放比例为1.0；
minimum-scale=1.0 和 maximum-scale=1.0 ：最小缩放比例和最大缩放比例；
user-scalable=no ：禁止用户自由缩放，user-scalable 默认值为 yes
上面的语句是带全部参数的，一般常用的，有 user-scalable=no 就不用使用 minimum-scale=1.0 和 maximum-scale=1.0 来强制禁止缩放了。例如：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
CSS样式总结：
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/
}
a, img {
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}
html, body {
-webkit-user-select: none; /*禁止选中文本*/
user-select: none;
}
button,input,optgroup,select,textarea {
-webkit-appearance:none; /*去掉webkit默认的表单样式*/
}
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}
input::-webkit-input-placeholder {
color:#ccc; /*修改webkit中input的planceholder样式*/
}
input:focus::-webkit-input-placeholder {
color:#f00; /*修改webkit中focus状态下input的planceholder样式*/
}
body {
-webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/
}
input::-webkit-input-speech-button {
display: none; /*隐藏Android的语音输入按钮*/
}
PS：CSS部分代码均有注释，不再一一阐述；
以上为WEBAPP开发中经常用到的一些脚手架代码，需要的朋友可以直接拿走，不谢！
---------------------------------------------------------------------
更多全栈技术类交流请关注微信公众号：放牛极客（geekcattle）
注意：本文归作者所有，未经作者允许，不得转载
