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)。

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

这里的维度计算为:

width = border + padding + 内容的 width,

height = border + padding + 内容的 height。

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

实现

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

坚持原创技术分享,您的支持将鼓励我继续创作!