1.chrome拦截弹窗问题
在前端编写中，可能会用到window.open，<a target="_blank">等方式来在新的窗口打开url，但会发现，有些情况下新打开的窗口页会被chrome拦截了
出现这种情况，很有可能是因为：这些调用不是由用户行为（如：点击）触发的。
一种典型场景：点击按钮，触发ajax请求，然后在ajax的回调中，打开新的窗口页。这里，打开新窗口页的操作是在回调的上下文中，并不在点击事件中，尝试打开tab页就会被拦截。
这种处理：可以在跳转页面触发用户行为来避免。比如：在新打开窗口页之前给个确认弹窗，用户点击后，就有用户上下文关系了，可以避免被拦截。
2.flex布局，文字不换行，多余省略，有时候会撑开父级。
.class{
flex:1,
overflow:hidden;
text-overflow:ellipsis;
whit-space:nowrap;
width:0;//处理撑开父级问题关键
}
3.div滑动不顺畅问题
增加css属性 -webkit-overflow-scrolling:touch；
更深入的研究请参考：
4.图片自适应填充
为img 设置class 属性: object-fit:cover;
5.iphone x 适配问题
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
css
body {
padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
6.h5在不同机型rem换算问题
在混合app开发过程中，有遇到同一个h5页面嵌入到不同app中，表现不一致的问题。
查究原因，发现不同webview下rem换算成px后值不一样，但是html的设置属性font-size都是一样的。最后定位到是webview 未限制页面字体随系统放大缩小，rem换算px的基准font-size变成了系统的font-size，最后换算出来的值就不是我们预期的了。
例如:
.wrapper{
width:100vw;//屏幕宽度
.main{
width:9rem;
position:absolute;
left:1rem;
}
}
这段css 在三星s8中就会出现div.main宽度超出了屏幕宽度，和我们预期的在屏幕居中，离左边1rem的效果不一致。
这类问题，如果没有特殊要求页面随系统字体变化的话，可以给webview设置页面字体不随系统改变； 如果需要页面字体随系统改变，这种大的宽度设置就不要用rem来处理了，改用em,或者百分比的方式吧。
