webapp填坑记录[更新中]

Posted 2020-10-14 Grewer

网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题:

• meta 头部声明
  在开发的时候,刚刚创建 html 文件,再使用浏览器的手机模式是没有手机上的效果的,所以要在头部添加:
  

  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

  这一串代码,就会模拟出手机的效果,并且还有其他好处:

  width=device-width ：表示宽度是设备屏幕的宽度
  initial-scale=1.0：表示初始的缩放比例 
  user-scalable=no：表示用户是否可以调整缩放比例
  minimum-scale=1：表示最小的缩放比例 
  maximum-scale=1：表示最大的缩放比例 

  
  
  

• css 宽度使用 rem
  这个网上有很多源码可以使用,加载一下不超时10多 k 的大小吧,简单好用,好处就是比如0.5rem大小的字体可以根据手机屏幕的大小自动缩放,不过有一些也可以不用,可以用 px 来代替,比如: border,background-size等等,还有宽度,高度,也尽量用百分比来控制会好点;
  
  
  
• 页面布局 flex
  尽量采用 flex 布局,关于上下,左右居中都十分方便,这里给出我之前写过的一片博客关于 flex 布局的 http://www.cnblogs.com/Grewer/p/7618096.html
  还有最重要的一点就是在 flex 布局里,如果最大的节点高度设为100%的话,要注意手机软键盘的问题,点开软键盘可能会让元素发生缩放,这个时候可以使用flex-shrink:0
  使用 flex 布局,最好定义一个全局变量,比如 .flex{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}然后再其他页面加上 flex的 class 就可以方便的使用;
  
  
  
• 表单提交
  在 webapp 里表单提交的体验很差,可能 h5的 api 没有什么好的支持,比如在填写账号和密码的时候,我刚填写完账号,软键盘的右下角是确定或者确认的字样,很奇怪;虽然可以监听回车键的动作,调到密码栏里,但是对于这我还是有强迫症的,然而我也并没有什么好的方法解决;
  在一个就是填写账号密码,在填写完密码后,右下角也还是和上面一样,并没有什么改变,不过这个可以用添加 form 表单的方法解决,详情请自行搜索;
  还有就是能全部填写数字的时候 input 的 type尽量写 number 这样软键盘打开的时候是数字键盘,比 text 体验会好很多;
  在 ios 中需要纯数字键盘的话,需要这样:
  

  <input type="number" pattern="[0-9]*" >

  但是他也有缺陷,就是没有小数点,请大家酌情使用

  
  再就是上传图片的问题,尽管只需要添加一个 input type="file" 的标签就行了,但是任然没有 api 可以自由选择照片的来源是照相机还是相册,我在网上搜索的时候,发现他们说是capture=“camera”这个可以解决,但是我亲身测验我的 iPhone 和 android 都没有效果,和没有加一样;
  
  
  
• iPhone 自带的a标签特效
  不知道你们有没有这个,反正我这儿是有的,就是原来是淡灰色的下划线,点击或者刷新任何页面后,再进去此页面,下划线颜色会变得更深,感觉又细了很多,这是 iPhone 的自带效果
  可以同过全局或局部的 a 标签的定义来解决,如像我这样a:link {color: #d9d9d9}a:visited {color: #d9d9d9}即可
  
  
• border
  border 的宽度问题,很多人想用宽度为0.5px 宽度来设置 border, 但是因为手机型号的问题会让有的能正常显示,而有的无法显示,这个可以使用我这样的方式来设置

  .item:after {
          border-bottom: 1px dashed #888;
          content: "";
          display: block;
          width:100%;
          -webkit-transform: scale(1, 0.5);
          transform: scale(1, 0.5);
      }

   

• input 光标
  在点击 input 的时候,我们想要跳出的是一个下拉选择框或者其他,但是这时候光标仍在 input 上,
  1.使用unselectable="on"   (缺点 IOS 无效);
  2.添加onfocus="this.blur()" 都有效
  
  当你使用软键盘的回车键进行提交时,比如 Vue 的 @keyup.enter="submit" 这样的操作时,一定要在 submit 里blur该输入框的焦点, 不然跳转到其他页面的时候,软键盘还会继续跳出来
  
  
  

• 不定高度的 overflow
  在选择下拉框或者选项卡的时候,会出现一种情况(某一个选项会很多,而某些选项会比较少),当选项很多的时候很多人都会想到 overflow, 但是不能设定固定的高度怎么办(因为比如某个选项是比整个屏幕要大的你设置 heiht:100%的时候,选择选项比较少的几个选项时也会让高度变为100%,但是又不能变成50%,因为有一些高度还是没那么高,会多出很多空白),这个时候需要用到组合{max-height:100%,overflow:scroll}他会让高度大于100%的选项卡出现能滚动的效果,但是 height 不足100%的时候仍然还是 height:auto 的效果也没有 overflow;
  如果无效,请确认 overflow:scroll 是否支持和子元素 是否带有监听了 touchstart 并且带有 event.preventDefault()这样的属性;
  
  

• iPhone 手机拍照产生的照片翻转
  如果只是显示在页面上,那么没有问题, html 会自动转换,但是如果要显示在 canvas 上进行截图,放大,缩小等操作就需要改变了;
  使用 exif.js 或者其他方法获取图片的翻转度,再用 canvas 旋转图片,来获取正确的图片;
  我新写了一个项目可解决ios手机上传竖拍照片旋转90度的问题:https://github.com/Grewer/appleCameraFix
  
  

• iOS 时间显示错误
  在 iOS 上在解析 类似于 new Date("2018-02-01 22:22:11") 这样的时间时,会出现时间的错误,要注意,单独解析 new Date("2018-02-01") 这样的日期是没有问题的,解决的方法很简单,使用正则替换即可:
  

  let time = "2018-02-01 22:22:11"
  time = time.replace(/-/gm ,"/");
  let d = new Date(time)

   

• iOS 中使用 css3的渐变色和 transform: translateX(-50%) 时会出现一条竖线的 bug
  效果如图:
  
  解决的方法也很容易:使用硬件加速,即 translate3d :
  

  transform: translateX(-50%);
  transform: translate3d(-50%, 0, 0);

  即可成功解决;