- iOS 滑动不流畅
- iOS 上拉边界下拉出现白色空白
- 页面放大或缩小不确定性行为
- click 点击穿透与延迟
- 软键盘弹出将页面顶起来、收起未回落问题
- iPhone X 底部栏适配问题
- 保存页面为图片和二维码问题和解决方案
- 微信公众号 H5 分享问题
- H5 调用 SDK 相关问题及解决方案
- H5 调试相关方案与策略
六：iPhone X系列安全区域适配问题
现象：头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。
原因：iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。
解决方案：设置安全区域，填充危险区域，危险区域不做操作和内容展示。
具体操作为：viewport-fit meta 标签设置为 cover，获取所有区域填充。判断设备是否属于 iPhone X，给头部底部增加适配层
设置 viewport-fit 为 cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover">
增加适配层
使用 safe area inset 变量
/* 适配 iPhone X 顶部填充*/
@supports (top: env(safe-area-inset-top)){
body,
.header{
padding-top: constant(safe-area-inset-top, 40px);
padding-top: env(safe-area-inset-top, 40px);
padding-top: var(safe-area-inset-top, 40px);
}
}
/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
body,
.footer{
padding-bottom: constant(safe-area-inset-bottom, 20px);
padding-bottom: env(safe-area-inset-bottom, 20px);
padding-top: var(safe-area-inset-bottom, 20px);
}
}
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。对于非矩形显示器（如圆形表盘，iPhoneX 屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。
其中 env() 用法为 env( <custom-ident> , <declaration-value>? )，第一个参数为自定义的区域，第二个为备用值。
其中 var() 用法为 var( <custom-property-name> , <declaration-value>? )，作用是在 env() 不生效的情况下，给出一个备用值。
constant（） 被 css 2017-2018 年为草稿阶段，是否已被标准化未知。而其他iOS 浏览器版本中是否有此函数未知，作为兼容处理而添加进去。七: 保存页面为图片和二维码问题和解决方案
现象：在工作中有需要将页面生成图片或者二维码的需求。可能我们第一想到的，交给后端来生成更简单。但是这样我们需要把页面代码全部传给后端，网络性能消耗太大。
解决方案 ：
1.生成二维码，
使用 QRCode,等插件生成二维码
import QRCode from 'qrcode';
// 使用 async 生成图片
const options = {};
const url = window.location.href;
async url => {
try {
console.log(await QRCode.toDataURL(url, options))
} catch (err) {
console.error(err);
}
}
将 await QRCode.toDataURL(url, options) 赋值给 图片 url 即可
2.生成图片
主要是使用 html2Canvas.js 生成 canvas 画布
import html2canvas from 'html2canvas';
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
我们使用一个新的 canvas 方法多倍生成，放入一倍容器里面，达到更加清晰的效果，通过超链接下载图片 下载文件简单实现，更完整的实现方式之后更新
const scaleSize = 2;
const newCanvas = document.createElement("canvas");
const target = document.querySelector('div');
const width = parseInt(window.getComputedStyle(target).width);
const height = parseInt(window.getComputedStyle(target).height);
newCanvas.width = width * scaleSize;
newCanvas.height = widthh * scaleSize;
newCanvas.style.width = width + "px";
newCanvas.style.height =width + "px";
const context = newCanvas.getContext("2d");
context.scale(scaleSize, scaleSize);
html2canvas(document.querySelector('.demo'), { canvas: newCanvas }).then(function(canvas) {
// 简单的通过超链接设置下载功能
document.querySelector(".btn").setAttribute('href', canvas.toDataURL());
}
当然入如果html中包含oss或者cdn图片，会出现跨域行为，此时需要将网络资源图片转为base64的图片，如：
// 需要跨域请求的列表
let imgList = [
{id: '#ossImage1', value: $("#ossImage1").attr('src')},
{id: '#ossImage2', value: $("#ossImage2").attr('src')}
];
// // pamoise 初始化请求图片
Promise.all(imgList.map((item) => getBas64(item.value))).then(result => {
// 返回的图片列表，重新渲染到页面上
result.forEach((v, k) => {
$(imgList[k].id).attr('src', v);
});
});
/**
* 图片转base64格式
*/
/**
* @description: 图片转base64
* @param {String} url 需要转换的图片原链接（http://....jpg）
* @param {String} outputFormat 转换出来的图片的类型（canvas支持jpg/png格式）
* @return: 返回图片对应的base64编码
*/
function getBas64(url, outputFormat = 'image/jpg') {
return new Promise(function (resolve, reject) {
let canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
let dataURL = canvas.toDataURL(outputFormat);
canvas = null;
resolve(dataURL);
};
// img.src = url; // 旧的方式
img.src = url + '?t=' + new Date().valueOf() // 防止oss的缓存问题
})
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
