web前端-移动端小技巧

移动端，数字去除电话格式，头部加  <meta name="format-detection" content="telephone=no" />

移动端，某区域设置有滚动条时，解决滚动不顺畅问题，实现弹性滚动，加样式 ：overflow-y:auto; -webkit-overflow-scrolling:touch;

移动端，给元素加click事件没反应时，加样式：cursor:pointer;试试看

移动端，当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景闪一下（苹果设备）或出现边框（安卓机）。要重置这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。加样式：-webkit-tap-highlight-color: rgba(0,0,0,0);

焦点在input时，placeholder没有隐藏
input:focus::-webkit-input-placeholder{opacity: 0;}

input输入框调出数字输入键盘
1、<input type="number" />
2、<input type="number" pattern="[0-9]*" />
3、<input type="tel" />
需要注意的是，单独使用type="number" 时候，iOS上出现并不是九宫格的数字键盘，如果需要九宫格的数字键盘，可选择使用 2、3 的方法。 1、2、3 在 Android 上均可以唤起九宫格的数字键盘

搜索时，键盘的回车按钮文字设定为“搜索”
解决： input 使用 type="search"，放在 form 表单内。两者结合就能使输入法中的回车按钮文字变为“搜索”
<form action="">
    <input type="search" />
</form>

iframe 在 iOS 上没有滚动条，直接撑出去
解决：给 iframe 外嵌套一个 div， 为这个 div 设置固定高度与 overflow
<div>
<iframe src=""></iframe>
</div>
div{height: 100px;overflow: auto;-webkit-overflow-scrolling: touch;}

当模块使用系统的横向滚动时，不想显示出系统的滚动条样式
Android：
::-webkit-scrollbar{
opacity: 0;
}
iOS 要隐藏横向滚动条，会稍微复杂一些
<div class="wrap">
<div class="box"></div>
</div>
.wrap{
height: 100px;
overflow: hidden;
}
.box{
width: 100%;
height: -webkit-calc(100% + 5px);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
原理：.box 元素的横向滚动条通过其外层元素 .wrap 的 overflow:hide 来隐藏。 （5px 是 iOS 上滚动条元素的高度）