随着移动端越来越普及，前端技术也是百花齐放，但目前移动平台的技术已经趋向于成熟，记得刚实习的时候就是接触的移动端，但现在2年多来，期间遇到了很多莫名其妙的问题，见证了手机用户量的突飞猛进，兴喜的是更多的人能见识到自己做的东西，这也是我一直一来的动力，当然也迎来了前所未有的挑战，机型层出不穷，比如OV一个月迭代一次的速度，也是比较可怕的。
下面列举一下一些常用问题的调整技巧：
safari浏览器下
去掉input输入框半阴影效果（这是IOS的默认样式）：
input{-webkit-appearance:none;}
链接图片禁止触发长按回调：
.css { -webkit-touch-callout: none; }
去掉元素点击半透明边框：
.css { -webkit-tap-highlight-color: transparent; }
表单内容禁止选中：
.css { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; }
表单内容禁止拖放：
.css { -webkit-user-drag: none; }
修改placeholder颜色：
input::-webkit-input-placeholder { color: #999999; }
去掉android输入框的语音键：
input::-webkit-input-speech-button { display: none; }
去掉input输入框首字母大写的问题：
<input autocapitalize="off" autocorrect="off" />
去掉input输入框自动填充的问题（密码输入框，验证码输入框）：
<input autocomplete="false"/>
input数字键盘唤起（iOS无小数点，android有，需要非法输入校验）：
<input type="text" pattern="[0-9]*">
去掉input获取焦点高亮：
input:focus { outline: none; }
去掉textarea右下角小箭头：
textarea { resize: none; }
拍照摄影功能：
<input type="file" capture="camera" accept="image/*"> <input type="file" accept="video/*">
微信浏览器字体颜色改不了：
.css { -webkit-text-fill-color: #999999; }
滚动不流畅：
.css { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
硬件加速：
.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
Android webview上默认data-dpr="1"，这是因为android手机普遍采用LCD屏，
但实际dpr可能不止是1，大部分是2，也可能是3，屏幕尺寸却还是一倍图尺寸
iOS webview上默认data-dpr="2"或者data-dpr="3"，这是因为iOS普遍采用高清屏，
实际dpr就是data-dpr的值，屏幕尺寸为dpr值 X 1倍图尺寸
这里对DPR倍图适配的媒体查询上要有所区别，data-dpr只能是对屏幕是否为高清屏做区分，而对LCD屏的划分不是很准确，首先对于iOS的适配肯定是需要DPR做倍图划分的，而iPhoneX Retina屏的出现导致DPR的值是无法准确估计的，因此iOS适配上采用最小DPR去适配效果会好一些，而Android上各个LCD屏幕最大的DPR都是固定的，因此iOS和Android的媒体查询区别如下：
//android @media only screen and (-webkit-max-device-pixel-ratio: @dpr) { } //ios @media only screen and (-webkit-min-device-pixel-ratio: @dpr) { }
当然另外一个有意思的地方是Android上部分机型可以适配非公开属性-webkit-device-pixel-ratio，对应的值为-webkit-max-device-pixel-ratio