h5开发web-app常见的问题集锦
2018-12-03 本文已影响0人
郝艳峰Vip
前沿:
之前在还没有用vue开发项目的时候,都是拿一些框架(mui,jquery-ui)等的框架来开发,原生的写法,直至项目上线,遇到了好多奇奇怪怪的坑,之前记录的坑一直遗忘在笔记的角落里,现在贴出来,方便自己查看以及更新。
- H5页面想禁止长按链接或长按图片后弹出菜单,解决办法:
-webkit-touch-callout: none;
- 想取消IOS里Button、Input上的默认样式,怎么办?(ios和android)上按钮button表现不同
-webkit-appearance: none;
- 多张图片放置在一起,不想有4PX的空隙
img{display:block};
img{float:left};
img{vertical-align:top}
- 改变Input里 placeholder属性的样式(好像有些机型不兼容,记不太清楚了)
::-webkit-input-placeholder{color:#ccc}
- input type=”num”时想去掉右边的上下箭头
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none !important; margin: 0;}
- 在iOS系统中键盘输入时默认首字母大写,解决办法:
<input type="text" autocapitalize="off" />
- 屏幕旋转横屏竖屏切换时,想禁止文本缩放
-webkit-text-size-adjust: 100%;
- 要实现点击链接可以打电话
<a href="tel:13666655546">客服电话</a>
- 要实现点击链接就可以发送短信
<a href="sms:13666655546">发送短信</a>
- 不想让数字识别为电话号码(曾经为了他找了好半天)
<meta name="format-detection"content="telephone=no" />
- 页面中的内容不想被人选中
-webkit-user-select: none;user-select: none;
- text-area设置禁止拖动
resize:none;
- 解决移动端点击事件出现的闪屏,有蓝色的遮罩事件
*{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}