| 实用

h5移动端开发踩小坑

兼容iOS的问题

在form表单中的input框iOS自带样式

  • 起因：在项目中做登录的输入框是用原生 HTML 写的，但是是套在 form 表单里，在浏览器、安卓端都是完美的，但是在 iOS 出现了内阴影、自带圆角等样式

  • 处理办法：

1
2
3
4
5
6
7
8
9
10
11
12
input {
  flex: 9;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 0;
  border-radius: 0;    /** 消除 iOS 自带的圆角样式 **/
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding-left: 15px;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent; /** 消除 iOS input 自带样式如果设置为 rgba(255,255,255,0) 可以同时屏蔽 ios 和 android 下点击元素时出现的阴影。因为 transparent 的属性值在 android 下无效 **/
  -webkit-appearance: none; /** 消除 iOS 自带阴影样式 **/
}

兼容安卓的问题

安卓的物理键盘

  • 起因：因为是h5的项目，我们很自然会遇到兼容平台（ios、安卓）、跨浏览器（微信浏览器、各个手机厂商的浏览器等等）花样百出

  • 经过：在安卓机上，我使用fixed的布局在屏幕最底部的问题，随着键盘的推起被推到了键盘上，在某些机型上，这个行为会让字和上面的输入框、按钮混在一起，那个布局，叫一个酸爽

  • 结果：在网上百度了很久，都没有找到很完美的方案，最后自己混合着试了试，找到了一个方案

    • 首先我把按钮的position由fixed改成了absolute
    • 通过window.document.documentElement.clientHeight获取设备的高度
    • 手动给最外层的容器添加高度为屏幕的高度使其高度不会因为键盘推起而被压缩
    • 最后就是根据想让文字具体在底部多高的位置就需要自己去设置按钮的bottom属性啦

浏览器自带样式

背景自动填充

  • 在开发中我们遇到过，某一表单的输入框反复被使用，有一些值会被浏览器记住，你可根据输入之后的提示点击选择，这个时候，你会发现输入框的背景色变成了黄色

  • 通过查看元素我们可以发现，这是谷歌浏览器给了一个自动填充文本框的背景样式

  • 可以添加input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}诸如此类的样式覆盖掉浏览器本身的样式

h5保存图片到本地

需求：

上半部分展示要保存到本地的图片，下半部分有一个按钮点击下载（其他浏览器）

其他浏览器

  • 按照需求，我们需要把展示的图片下载下来

  • 考虑过用 canvas 去渲染图片，但是存在一个致命的问题跨域

1
2
3
4
5
6
7
8
9
const canvasImg = document.getElementsByTagName('canvas')[0];
const image = new Image();

image.src = canvasImg.toDataURL('image/png');
const alink = document.createElement('img');
alink.className = 'qrcode';
alink.src = image.src; // 跨域就会报错
alink.style = 'width:130px;padding:5px;border:1px solid #D8D8D8';
alink.download = '下载文件的名字.png';
  • 后来用a标签的download属性来做下载的操作
1
2
3
4
5
<a href={data} download={`二维码-${new Date().getSeconds()}.png`}>
  <Button size="small" inline type="primary">
    保存图片
  </Button>
</a>

微信浏览器

  • 本来打算复用上述的方式，但是微信浏览器内部出于安全角度的考虑把a标签的下载给禁掉了

  • 所以在微信浏览器上我们换了一个呈现方式 - 长按图片保存

  • 要实现长按图片保存其实不是通过长按展示的那个图片，我们要做一个图片铺在整个屏幕上且是body元素的直接子元素

1
2
3
4
5
const body = document.getElementsByTagName('body')[0];
const img = document.createElement('img');
img.setAttribute('style', 'height: 100%;width: 100%;opacity: 0');
img.setAttribute('src', url);
body.appendChild(img);
ESC