移动端h5常见问题

1.弹出数字键盘

<input type="tel">

<input pattern="\d*">

安卓跟IOS的表现形式应该不一样，大家可以自己试试。当运用了正则pattern后，就不用关注input的类型了 。

2.图片从接口请求渲染

图片从接口请求渲染时，当图片还未请求过来时或者请求失败时，此时的src属性为空，在谷歌浏览器和苹果手机上会显示默认边框。如果img标签是通过循环渲染出来的就不会出现这种情况。
解决：img[src=“”],img:not([src]){opacity:0;}

3.移动端没有scroll事件

移动端没有scroll事件，需要通过touchmove来监听，注意scrollTop兼容（各浏览器在标准模式和怪异模式下获取scrollTop的方式不同）
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

4.利用transform:scale(xxx)缩小元素时

利用transform:scale(xxx)缩小元素时，元素本身大小变化，但元素所占区域大小不变。该元素后的元素可视transform-origin情况进行margin-top调节。

5.Element.scrollIntoView()

方法让当前的元素滚动到浏览器窗口的可视区域内。手动进行相关操作会打断元素滚动动画。
eg:
var element = document.getElementById(“box”);
element.scrollIntoView({behavior: “smooth”, block: “start”, inline: “nearest”});
注意：取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。出现这种情况可以让元素滚动一段时间时直接scrollTop = scrollHeight让该元素滚动到底部。

6.弹窗弹起时底部滚动问题。

弹窗弹起覆盖整个窗口时，为了用户体验，一般会禁止弹窗底部页面内容滚动。
通过document.documentElement.style.height = ‘100vh’;document.body.style.overflow = 'hidden’禁止滚动时，在微信内浏览器底部页面内容确实不能滚动了，但是在某些浏览器（如QQ浏览器，搜狗浏览器，荣耀自带浏览器） 内仍然能够滚动。
爱奇艺会员页、中国移动权益超市等弹窗底部页面内容可以滚动

7.angular中date管道问题。

在angular中，我们用date管道处理后端返回的数据时：
<div>{ {time | date :'yyyy-MM-dd hh-mm'}}</div>
这种写法在ios端时间显示是有问题的。

8.移动端点击穿透问题

移动端点击穿透问题是由click事件300ms延迟引起了，300ms延迟是移动端为了判断是否为双击而设置的。触发点击穿透场景常见于关闭弹窗时触发了弹窗底部的click事件。事件触发顺序touchstart > touchmove > touchend > click
解决方法：1.移动端统一使用touchstart事件，但a标签的点击使用的是click事件，那就不使用a标签跳转。2.可以在touchend事件里取消默认事件。

9.移动端失去焦点 并收起键盘

安卓移动端点击输入框外去其它区域就能失去焦点，键盘收起；ios移动端safari浏览器点击输入框外其它区域能失去焦点并收起键盘，但在webview中并不能。ios移动端在webview需要手动失去焦点才能收起键盘，或者点击区域有点击事件也能失去焦点并收起键盘。

10.安卓webview中：通过a标签打开外链时，不能使用新窗口打开。也无法通过window.open方法打开外链。

11.点击a标签出现的软键盘？
解决方法：去掉-webkit-user-modify属性
a {
//控制用户能否对页面文本进行编辑
-webkit-user-modify:read-write-plaintext-only;
}

11.如何关闭当前标签页（当前窗口）？
window.close() : pc端没问题，但在移动端部分浏览器无效（如uc浏览器）
在微信浏览器中：

 //andriod:
 document.addEventListener(
	"WeixinJSBridgeReady",
		function () {
    
			WeixinJSBridge.call("closeWindow");
		},
	false
);
//ios
WeixinJSBridge.call("closeWindow");

12.移动端ios系统点击input、texarea等后页面会被放大
据说是因为ios输入框字体小于16px的时候，为了用户体验会把界面放大
方案：设置meta最大最小缩放比为1，且禁止用户缩放

<meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

或者通过js禁止用户缩放

ios gesturestart双指或多指触摸事件

document.addEventListener("gesturestart", function(event) {
    
            event.preventDefault();
});