首次触摸移动端之H5

根据项目需求，我们的项目需要在已有的Android APP中嵌入PC客户端的一些功能，由于功能比较简单，加之又没有Android开发人员，我们选择用webview嵌入h5页面。

都说移动端项目的坑很多，在真机调试前都没有什么感觉。在尺寸自适应方面，我们选用了viewport的方案，用了postcss及其插件，多的不说了，想了解看这两篇文章使用Flexible实现手淘H5页面的终端适配和再聊移动端页面的适配，另外项目采用Vue-cli生成（其实开发完后发现vuex根本就用不上，当时就为了方便不去配webpack），这里再推荐一篇文章如何在Vue项目中使用vw实现移动端适配。

这里主要讲下我们在开发中遇到的两个坑，测试机为Android 5+

坑一： 部分image在移动端无法显示

乍一看标题，google一搜，有很多解决方案，大部分是说路径问题，然而我们是部分image无法显示。
刚开始我们也以为是所有image都显示不出来，后来发现放在div 用css的background设置的image都显示出来了，是用img标签的没显示出来，以为是路径问题，然而又发现有一张用img标签图片是显示出来了的，路径都是一样的，说明不是路径问题，我们也怀疑过是不是图片本身的问题，实验证明不是这个问题。最后能怀疑的地方就是CSS样式问题，于是我们对比显示出来图片这个img标签的样式和显示不出图片的img标签的样式。

不可显示图片code

//html

  

//css
.humanbasicinfo-avatar img{
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

可显示图片code

//html

  

//css
.empty-page {
  height: 100%;
  padding-top: 180px;
  position: relative;
}
.empty-page-img {
   width: 100%;
}

用chrome移动端调试方法可以看到显示不出来的image的img标签在DOM中是存在的且占有位置，并且hover到src链接也能看到图片。另外我用IOS手机和Android手机连接本地热点，用网址访问H5的服务端口，内置浏览器上也无法显示图片。

对比两段代码，发现显示不出来的图片的不同在于设置了具体的高度和宽度，还设置了border-radius，把该img的width、height、border-radius分别去掉，当都去掉的时候就显示出来了，后来加上width：100%和height：100%也没有问题。

同事猜想是单位问题，我们将100%调成50%，发现亦能显示，border-radius变成100%，也能显示出圆边效果。同事恍然大悟，我们用了postcss的插件将px自动转成vw，当前版本的Android webview、Android的自带浏览器、IOS safari 可能在img标签上不支持viewport，以前PC端的chrome老版本好像也有过这个问题。

最后为了用viewport，我们在img标签的外新增一层标签设置具体的高度和宽度，img标签上width、height、border-radius都设置为100%。

这个问题应该是浏览器内核的bug，除了img标签，其他标签上的vw都用着没事，所以这算是一个大坑。另外Mac10.13.6上的safari也有这个问题，这很有可能是webkit的问题。目前在chrome68.0.3440.106版本中是修复了这个问题的。

坑二： Safari 浏览器new Date()

在用safari浏览器测试的时候发现日期'2018-4'显示成了'NaN-NaN'，后台传来的日期格式是'2018-4-12 12:00:00'，用new Date()将该字符串转换成日期类型时就出问题了，查阅文档

Date相关文档

红色部分解释了为什么chrome下显示正常，safari显示不正常，这真是知识盲点，日期和时间之间的空格就是转换成日期格式时非法的原因，解决办法：

new Date(timeStr.replace(' ', 'T'))

不涉及浏览器兼容还真遇不到这个问题。

以上就是我初次接触移动端遇到的坑，真是不做移动端就不会涉及各种兼容性问题。