移动端各种小技巧及优化体验（网上看到记录一下省的总结了）

1.meta固定语句
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

width 属性控制设备的宽度,device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

当然具体的情况的时候，还是要根据自己需求的情况而定，你要禁用缩放功能，就添加maximum-scale=1.0 与 user-scalable=no。不准备禁用就不写。

2.点击某个超链接的元素，点击下去的时候，部分手机会出现黑色阴影覆盖，以及需求禁止系统默认菜单 和 禁止选中文本，解决方案：
a{-webkit-tap-highlight-color: transparent;  -webkit-touch-callout: none;  -webkit-user-select: none;}

-webkit-tap-highlight-color: transparent;   点击超链接或可点击的元素时的高亮颜色，值可为 一种color 或者 透明transparent;
-webkit-touch-callout: none;    当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。(在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。)
-webkit-user-select: none;  禁止选中文本。

3.好用的@media
(自行百度，嘿嘿嘿)

4.移动端字体大小参考
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}