锐客网

  1. 首页 > 睿知 > it技术 > >

webapp填坑记录[更新中]

IT知识更新记录webapp

学向勤中得，萤窗万卷书。这篇文章主要讲述webapp填坑记录[更新中]相关的知识，希望能为你提供帮助。
网上也有许多的 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]*" >

    【webapp填坑记录[更新中]】但是他也有缺陷,就是没有小数点,请大家酌情使用

    再就是上传图片的问题,尽管只需要添加一个 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
    效果如图:
    webapp填坑记录[更新中]

    文章图片

    解决的方法也很容易:使用硬件加速,即  translate3d :
    transform: translateX(-50%); transform: translate3d(-50%, 0, 0);

    即可成功解决;



    推荐阅读


    上一篇：四.Windows I/O模型之重叠IO(overlapped)模型

    下一篇：Android系统版本Platform版本SDK版本gradle修改