IOS 移动端兼容
alert\confirm
在用 alert\confirm 时，弹窗都会被添加当前 URL 地址。
重写 alert 跟 confirm 解决：
// 重写 alert
window.alert = function (name) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", "data:text/plain,");
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);
};
// 重写 confirm
window.confirm = function (message) {
var iframe = document.createElement("IFRAME");
iframe.style.display = "none";
iframe.setAttribute("src", "data:text/plain,");
document.documentElement.appendChild(iframe);
var alertFrame = window.frames[0];
var result = alertFrame.window.confirm(message);
iframe.parentNode.removeChild(iframe);
return result;
};
- 相关知识点：html 中 data 类型的 url 有以下几种形式
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
安全区域
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。
iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：
contain: 可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口
auto：默认值，跟 contain 表现一致
- iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
我们主要用到 safe-area-inset-bottom 这个变量，因为它对应的就是底部小黑条的高度（横竖屏时值不一样）。
适配的几种方法
根据项目自行选择。
- 设置网页在可视窗口的布局方式，新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口。
只有设置了 viewport-fit=cover，才能使用 constant 函数
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' &&
(CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write( '
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '"
/>
')
</script>
- 页面主体内容限定在安全区域内
根据实际项目页面场景选择，如果不设置，可能存在小黑条遮挡页面最底部内容的情况。
body {
padding-bottom: env(safe-area-inset-bottom);
}
- fixed 吸底元素的适配
.class {
padding-bottom: env(safe-area-inset-bottom);
/* 如果吸底元素设置了高度，则需要重新设置 height*/
height: calc(原有高度 + env(safe-area-inset-bottom));
}
- @supports 判断浏览器是否支持
@supports 按照浏览器是否支持一个或多个特定的 CSS 特性应用一组样式声明;
如果只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 来隔离兼容样式。
/* @supports 判断浏览器是否支持 bottom: env(safe-area-inset-bottom）,执行下面的样式 safe-area-inset-bottom: iphone安全区域距离底部边界距离 */
@supports (bottom: env(safe-area-inset-bottom)) {
body::after {
content: "";
display: block;
height: constant(safe-area-inset-buttom);
background-color: white;
}
}
注：只有设置了 viewport-fit=cover，才能使用 constant 函数
上传照片问题
使用 exif.js 解决 ios 手机上传竖拍照片旋转 90 度问题
...不定时更新
Powered by Waline v2.15.8