web前端-移动端小技巧

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

 

穿透层 选中下一层的内容 图片长按不能复制
pointer-events: none;

 

替换url（苹果手机没有底部前后按钮）
window.location.replace('./index.html')

 

某区域设置有滚动条时，解决滚动不顺畅问题，实现弹性滚动，加样式 ：
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;}

 

移动端隐藏滚动条 .hd_body::-webkit-scrollbar{ display:none; background-color:transparent;}

当模块使用系统的横向滚动时，不想显示出系统的滚动条样式
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 上滚动条元素的高度）