vue+IOS9页面白屏

一、页面白屏

一个已经上线的项目，客户反映：IOS9.2、IOS9.3的苹果手机打开白屏。

分析原因

当时猜想是不是IOS9的系统浏览器版本太低，不支持一些语法导致的。
然后启动IOS9的模拟器，再连接浏览器，查看console的错误日志。果然，有一个错误就是不能识别const，再查看详细内容，是引用的Swiper中的一个swiper.bundle.js导致的。

处理方案

下载离线Swiper，然后在index.html中静态引用。
如果有的组件没有离线版本，可复制源码，然后放在src/目录文件夹下的任何地方，那么打包的时候就会编译成兼容性好的es5语法(前提是引用的babel)

二、display: grid语法不支持

这个可以用其他的一些写法实现。

1. 使用table
2. 使用float

比较麻烦的是怎么实现grid布局中的gap？box-sizing: border-box可以实现这一功能。

box-sizing 属性值说明:

1. content-box默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。

2. border-boxwidth 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

这里的维度计算为：

width = border + padding + 内容的 width，

height = border + padding + 内容的 height。

3. padding-boxwidth 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。

实现

参考element-ui中的Row、Col组件。