vue+IOS9页面白屏

一、页面白屏

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

分析原因

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

处理方案

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

二、display: grid语法不支持

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

使用table
使用float

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

box-sizing 属性值说明:

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

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

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。

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

实现

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

vue+IOS9页面白屏相关推荐

vue导致页面白屏几种情况
1.vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况. 原因:在使用vue-cli脚手架构建完项目,项目完成后,需打包上线.默认打包方式则是 np ...
iframe嵌入页面白屏_BFCache 与浏览器前进后退白屏
什么是BFCache back-forward cache, 为浏览器前进/后退时准备的缓存官方解释提到了 nsIDOMWindow ,那什么是 nsIDOMWindow 呢? This inter ...
app中加载h5页面白屏问题
一.问题描述:通过原生检查日志在网络不好的情况下,由于vue打包后的第三方js包加载失败导致h5页面白屏. 二.解决方案: 1.减少第三方依赖:在package.json中把不需要的包删除. 2.组件 ...
vue实现页面锁屏完美解决
vue实现页面锁屏完美解决最新写项目客户要求写一个锁屏功能.静下心来,慢慢看 ,相信你会有收获的. 功能点 1.禁止浏览器返回按钮. 2.手动输入路由会强制跳到锁屏页面. 3.必须输入正确密码或者 ...
vue实现页面全屏和退出全屏
pc端使用vue实现页面全屏和退出全屏 element.requestFullScreen() -- 全屏显示 Element.requestFullscreen()方法用于异步请求使得Elemen ...
vue实现页面锁屏完美解决（续集）
vue实现页面锁屏完美解决 (续集) vue实现页面锁屏完美解决这篇文章的续集. 上面那篇文章还不够完美在后面还是出现了一些bug.所以为了大家能少走点弯路我把我遇到的坑以及解决的办法和最新的写 ...
vue页面白屏的原因及优化
一.原因: 单页面应用的 html 是靠 js 生成,因为首屏需要加载很大的js文件(app.js 和vendor.js),所以当网速差的时候会产生一定程度的白屏二.解决办法: 1.路由懒加载,组件 ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
前端--导致页面白屏的原因
JS问题常用框架Vue React Angular都是依靠JS进行驱动, 并且单页面的应用html也是依靠JS生成,在渲染页面的时候需要加载很大的JS文件,在JS解析加载完成之前无法展示页面,从而导 ...
前端发版本，页面白屏报错，微信缓存不更新资源
作为前端开发可能会经常遇到,产品.运营.用户吐槽反馈问题:为什么我的页面空白.页面没有更新,为什么每次都要清缓存.要点刷新按钮. 一.为什么会白屏.资源报错? 我们每次打包都会生成一个index.ht ...