本人两年移动端开发中踩的坑和一些经验总结（持续更新...）

本人接触移动端Web开发两年有余，说起移动端开发大多数是基于微信平台下开发的产品，这里先写下一些我所碰到的坑和经验总结，方便以后开发遗忘查阅。

BLOG LINK（更新于20160510）

• 关于微信H5页面开发中音乐不自动播放的解决方法
• 关于微信H5网页开发中二维码无法识别的解决方法
• 关于 JavaScript & jQuery 操作 <audio> 标签
• viewport 模板（通用 HTML5 初始 *.html 文件）
• 本人总结的常用的浏览器 reset.css 方案

本文目录

1. 如何去掉移动端中元素触摸时产生的半透明灰色遮罩？
2. 如何在移动端点击电话号码一键拨打电话？
3. 如何在移动端点击电话号码一键发短信？
4. 如何该改变 placeholder 的颜色？
5. 如何在 iOS 中禁止长按链接&图片时弹出菜单（iOS & Android 禁止下载图片）？
6. 如何在 iOS 中清除输入框内阴影？
7. 如何消除 transition 闪屏？
8. 如何设置屏幕旋转的事件和样式？
9. 如何禁止 iOS 和 Android 用户选中文字？
10. 如何去掉 input type="number" 中的上下箭头？
11. 如何清除移动端页面中的滚动条？

------------------------------------------------------------ 帅气的分割线 ------------------------------------------------------------

1. 移动端中 a,button,input,optgroup,select,textarea 等标签点击的时候会有一层蓝色或者白色块状背景，看的好恶心，我们可以用 CSS 来解决这个问题：

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

2. 如何在移动端点击电话号码一键拨打电话呢？这里我们用到了 a 标签：

<a href="tel:10086">打给10086</a>

3. 如何在移动端点击电话号码一键发短信（在不考虑 winphone 系统的情况下）？

<a href="sms:10086">发短信给10086</a>

4. 如何该改变 placeholder 的颜色？

input::-webkit-input-placeholder {color:red;} 
input:focus::-webkit-input-placeholder {color:blue;}

5. 如何在 iOS 中禁止长按链接&图片时弹出菜单（iOS & Android 禁止下载图片）？

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

6. 如何在 iOS 中清除输入框内阴影？

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

7. 如何消除 transition 闪屏？

.css {
    /**设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /**（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
    -webkit-backface-visibility: hidden;
}

开启硬件加速，解决页面闪白，保证动画流畅。

.css {
   -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
}

设计高性能 CSS3 动画的几个要素，尽可能地使用合成属性 transform 和 opacity 来设计 CSS3 动画，不使用 position 的 left 和 top 来定位，利用 translate3D 开启 GPU 加速。

8. 如何设置屏幕旋转的事件和样式？

【事件】window.orientation，取值：正负 90 表示横屏模式、0 和 180 表现为竖屏模式：

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
} 

【样式】利用 @media 媒体查询来识别切换相应样式：

/**竖屏时使用的样式*/
@media all and (orientation:portrait) {
    .css{}
}
/**横屏时使用的样式*/
@media all and (orientation:landscape) {
    .css{}
}

 9. 如何禁止 iOS 和 Android 用户选中文字？

css {-webkit-user-select:none}

 10. 如何去掉 input type="number" 中的上下箭头？

/**Chrome*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
/**Firefox*/
input[type="number"] {-moz-appearance:textfield;}

 11. 如何清除移动端页面中的滚动条？

::-webkit-scrollbar {width: 0;} /* 滚动条整体部分 */
::-webkit-scrollbar-track {background-color: rgba(0,0,0,0);} /* 滚动条的轨道（里面装有Thumb） */
::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,0);} /* 滑块颜色 */
::-webkit-scrollbar-button {background-color: rgba(0,0,0,0);} /* 滚动条的轨道的两端按钮 */
::-webkit-scrollbar-corner {background-color: rgba(0,0,0,0);} /* 边角，即两个滚动条的交汇处 */