记h5项目中在ios9白屏问题

h5项目在内嵌在app应用中，在ios9白屏，想到的解决方案

1. 使用vconsole（腾讯开发的）一个插件，在手机应用中查看控制台信息
2. 在ios9的safari浏览器中打开一个白屏页面的链接，查看报错信息

实际用到的是第二种方式
因为白屏，啥都没有也就没有vconsole的按钮，但是vconsole还是很有用的，拿个小本本记下来
复制代码

1.在safari控制台发现报错信息

SyntaxError: Use of const in strict mode.
复制代码

搜索结果

原来在webpack-dev-server的2.7.0以上版本中，在webpack-dev-server下的client/index.js文件中使用了es6的语法，而我们在使用babel-loader解析js的时候会将node_modules下的文件exculde，这就导致了报错！！！ 解决方案

module: {
    rules: [
        {
            test: /.js$/,
            loader: 'babel-loader',
            include:[resolve('src'), resolve('node_modules/webpack_dev_server/client')]
        }
    ]
    
}
复制代码

在解决了这个问题后，我的h5页面就可以正常展示啦，开心 2. 展示的样式不对，这个主要是position: unset样式不支持，改成position: initial

3. 获取viewport的方式不对

// 这种方式在iso9下并不支持
document.getElementsByTagName('meta').viewport
// 改用
// 1. 在  <meta name='viewport' id='viewport' ...> 添加id为viewport
// 2. 通过getElementById获取对象，通过setAttribute设置content内容
document.getElementById('viewport').setAttribute('content', '。。。')
复制代码

4. vue在ios9系统下，数组在使用for in时，会循环两遍的问题

// 将for in改成for循环
for(let i = 0; i < items.length; i++){
    ...
}
复制代码

以上

在此之前兼容问题很少弄，所以开始时，有些方，导致解决问题用时很长，用小本本记下来，以后按照流程走，不能方，要稳！