像素适配
1px 问题
所谓
window.devicePixelRatio=物理像素 / CSS像素
目前主流的屏幕
border: 0.5px solid #e5e5e5;
或者使用边框图片：
border: 1px solid transparent;
border-image: url("./../../image/96.jpg") 2 repeat;
或者使用阴影：
box-shadow: 0 -1px 1px -1px #e5e5e5, //上边线
1px 0 1px -1px #e5e5e5,
//右边线
0 1px 1px -1px #e5e5e5, // 下边线
-1px 0 1px -1px #e5e5e5; /** 左边线 */
或者使用伪元素：
.setOnePx {
position: relative;
&::after {
position: absolute;
content: "";
background-color: #e5e5e5;
display: block;
width: 100%;
height: 1px; /*no*/
transform: scale(1, 0.5);
top: 0;
left: 0;
}
}
可以看到，将伪元素设置绝对定位，并且和父元素的左上角对齐，将
<html>
<head>
<title>1px question</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta
name="viewport"
id="WebViewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<style>
html {
font-size: 1px;
}
* {
padding: 0;
margin: 0;
}
.top_b {
border-bottom: 1px solid #e5e5e5;
}
.a,
.b {
box-sizing: border-box;
margin-top: 1rem;
padding: 1rem;
font-size: 1.4rem;
}
.a {
width: 100%;
}
.b {
background: #f5f5f5;
width: 100%;
}
</style>
<script>
var viewport = document.querySelector("meta[name=viewport]");
//下面是根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
viewport.setAttribute(
"content",
"width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
);
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute(
"content",
"width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
);
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute(
"content",
"width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no"
);
}
var docEl = document.documentElement;
var fontsize = 32 * (docEl.clientWidth / 750) + "px";
docEl.style.fontSize = fontsize;
</script>
</head>
<body>
<div class="top_b a">下面的底边宽度是虚拟 1 像素的</div>
<div class="b">上面的边框宽度是虚拟 1 像素的</div>
</body>
</html>
软键盘将页面顶起来、收起未回落问题
解决方案是软键盘将页面顶起来的解决方案，主要是通过监听页面高度变化，强制恢复成弹出前的高度。
// 记录原有的视口高度
const originalHeight =
document.body.clientHeight || document.documentElement.clientHeight;
window.onresize = function () {
var resizeHeight =
document.documentElement.clientHeight || document.body.clientHeight;
if (resizeHeight < originalHeight) {
// 恢复内容区域高度
// const container = document.getElementById("container")
// 例如 container.style.height = originalHeight;
}
};
键盘不能回落问题出现在
const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!isWechat) return;
const wechatVersion = wechatInfo[1];
const version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
// 如果设备类型为 iOS 12+ 和 wechat 6.7.4+，恢复成原来的视口
if (+wechatVersion.replace(/\./g, "") >= 674 && +version[1] >= 12) {
window.scrollTo(
0,
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}
window.scrollTo(x-coord, y-coord)，其中
iPhone X 系列安全区域适配问题
头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。
auto：此值不影响初始布局视图端口，并且整个web 页面都是可查看的。contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。cover：视图端口被缩放以填充设备显示。强烈建议使用safe area inset变量，以确保重要内容不会出现在显示之外。
设置viewport-fit 为cover
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover"
/>
增加适配层
/* 适配 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);
}
}
其中