本人接触移动端Web开发两年有余,说起移动端开发大多数是基于微信平台下开发的产品,这里先写下一些我所碰到的坑和经验总结,方便以后开发遗忘查阅。
BLOG LINK(更新于20160510)
- 关于微信H5页面开发中音乐不自动播放的解决方法
- 关于微信H5网页开发中二维码无法识别的解决方法
- 关于 JavaScript & jQuery 操作 <audio> 标签
- viewport 模板(通用 HTML5 初始 *.html 文件)
- 本人总结的常用的浏览器 reset.css 方案
本文目录
- 如何去掉移动端中元素触摸时产生的半透明灰色遮罩?
- 如何在移动端点击电话号码一键拨打电话?
- 如何在移动端点击电话号码一键发短信?
- 如何该改变 placeholder 的颜色?
- 如何在 iOS 中禁止长按链接&图片时弹出菜单(iOS & Android 禁止下载图片)?
- 如何在 iOS 中清除输入框内阴影?
- 如何消除 transition 闪屏?
- 如何设置屏幕旋转的事件和样式?
- 如何禁止 iOS 和 Android 用户选中文字?
- 如何去掉 input type="number" 中的上下箭头?
- 如何清除移动端页面中的滚动条?
------------------------------------------------------------ 帅气的分割线 ------------------------------------------------------------
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>
input::-webkit-input-placeholder {color:red;} input:focus::-webkit-input-placeholder {color:blue;}
5. 如何在 iOS 中禁止长按链接&图片时弹出菜单(iOS & Android 禁止下载图片)?
a, img { -webkit-touch-callout: none; }
input,textarea { -webkit-appearance: none; }
.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 加速。
【事件】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{} }
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;}
::-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);} /* 边角,即两个滚动条的交汇处 */