微信内置浏览器背景颜色问题
一般来说在开发时看到手机默认的背景颜色是白色，然而有些手机的背景颜色却不是白色的。所以为了保证背景色是白色（你需要的颜色）可以在在reset.css统一设置背景颜色
在ios使用document.execCommand复制文字
ios下需多调用一下focus()方法才能复制成功
var txt = document.getElementById('elemId')
txt.focus() // ios下需要调用，Android可以不用
txt.select()
txt.setSelectionRange(0, txt.value.length)
if (document.execCommand('copy', true, null)) {
// 复制成功
} else {
// 网页不兼容，无法复制
}
ios调用focus()无效问题
有时调用focus()使input进行自动聚焦时，你会发现在ios真机上无效。那是因为要是ios上focus()要生效的前提必须是用户手动触发的事件，不是用户触发的事件，而单独设置focus()聚焦是没用的。
html
<div class='seacrh'>
<div class='search_txt'>搜索你想购买的商品</div>
</div>
js
document
.getElementsByClassName('seacrh')[0]
.addEventListener('click', searcHandle, false)
function searcHandle () {
// 要聚焦的input元素
document.querySelector('.inputClass').focus()
}
ios脱离文档流滚动bug
微信内置浏览器浏览的H5页面input弹出键盘时遮盖文本框
if (document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA') {
window.setTimeout(() => {
document.activeElement.scrollIntoViewIfNeeded()
}, 0)
}
键盘窗口关闭后留白问题，需再次点击才能恢复
在输入框失去焦点时执行：
setTimeout(function () {
window.scrollTo(0, 0)
}, 0)
移动端字体变大问题
问题： 在webkit的浏览器内核中，当页面中的标签数量或者文本数量大于某一个值，或者当CSS定义的字体大小落在某个区间时，字体会被放大，使得原始定义的字体也被放大。
原因： webkit内核的浏览器有个特性：「Text Autosizer」，又称「Font Boosting」，是 Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。
解决方案：
1、手动指定 viewport width=320，这时 Font Boosting 不会被触发
2、FontBoosting 仅在未限定尺寸的文本流中有效，给元素指定宽高，就可以避免 Font Boosting 被触发
3、显然第 2 条方案是有缺陷的，文本内容不可能都指定宽高。不过还好，我们通过指定max-height ,min-height, min-width, max-width
div,p{
max-height:999999px;
max-width:999999px
}
ios中慎用position: fixed/absolute
IOS下box-shadow的诡异bug
公司项目要加个引导功能；以前引导的步骤是使用的图片，然后通过绝对定位实现。然而这次不能使用图片，要根据元素区域高亮来实现引导。 类似于
google一下，最后思考查找发现有两种实现方式
1、box-shadow通过设置一个大的阴影值达到蒙版的效果。
2、使目标元素浮起来，再使其z-index的值大于蒙版的z-index值，达到高亮的效果
使用后发现第二种方法比较麻烦且，且在ios上容易出现bug，特别是当使用了-webkit-overflow-scrolling: touch来优化ios滚动效果和position:absolute;。你会发现z-index无效。必须让目标元素位于蒙版元素之后才行。
所以选择使用box-shadow实现。
box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 1px 10000px;
问题来了~真机一看，我的f***，没高亮了？emmm...加上-webkit-box-shadow和-webkit-appearance:none看看；额~依然不行，我太难了！！！。之后猜想可能是shadow值太大，无奈把10000改成1000试一下。嗯，运气挺好，行了！虽然可以了但是一脸蒙蔽，不知其所以然呀(＃￣～￣＃)，果断google去。
以下是google看到的结论
2039px这个是边界值（准确来说是2039.98px）当尺寸小于等于这个值的时候是显示正常的，大于这个值是不能显示box-shadow的
还有另一种情况：元素同时设置border-radius和box-shadow的时候：如果圆角的值一致，请确保这两个值的和不超过2044px，如果一定会超过的话，请微小修改其中一个圆角的值，比如5.999px
box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 6px 90px;
// 显示正常
box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 6px 6px;
// 不显示
box-shadow: 0px 0px 0px 2039px #000;
border-radius: 6px 6px 5.9999px 6px;
// 显示正常
参考地址：
fullpage.js证书问题
fullpage3.0之后是有证书认证的，没有买的会报以下错误：
