Blink Docs

Appearance

css常见问题和解决方法 ​

flex:1元素无效，被子元素内容撑开。 ​

在此元素上加上width:0

inline-block元素之间存在间隙 ​

在父级使用font-size:0px消除

清除浮动导致的高度塌陷 ​

  • 通过在浮动元素的尾部增加一个元素并添加clear属性
  • 创建父级 BFC
  • 设置高度

适配 iphoneX 等机型的底部导航条 ​

  1. viewport需要设置：viewport-fit=cover

  2. 在固定定位中设置向下内边距：

css
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

Chrome最小字体 ​

中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

ios弹性滚动 ​

在苹果系统上非<body>元素的滚动操作可能会存在卡顿，但安卓系统不会出现该情况。通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。

css
body {
  -webkit-overflow-scrolling: touch;
}
.elem {
  overflow: auto;
}

禁止长按操作 ​

css
* {
  /* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
  user-select: none; /* 禁止长按选择文字 */
  -webkit-touch-callout: none;
}
input,
textarea {
  user-select: auto;
}

禁止触摸元素时元素高亮 ​

css
* {
  -webkit-tap-highlight-color: transparent;
}

非点击元素点击失效： ​

css
.elem {
  cursor: pointer;
}

禁止点击穿透和300ms延迟 ​

js
import Fastclick from 'fastclick';
FastClick.attach(document.body);

禁止滑动穿透 ​

css
body.static {
  position: fixed;
  left: 0;
  width: 100%;
}
js
const body = document.body;
const openBtn = document.getElementById('open-btn');
const closeBtn = document.getElementById('close-btn');
openBtn.addEventListener('click', (e) => {
  e.stopPropagation();
  const scrollTop = document.scrollingElement.scrollTop;
  body.classList.add('static');
  body.style.top = `-${scrollTop}px`;
});
closeBtn.addEventListener('click', (e) => {
  e.stopPropagation();
  body.classList.remove('static');
  body.style.top = '';
});

修复高度塌陷：输入框失焦后页面未回弹。 ​

  • 页面高度过小
  • 输入框在页面底部或视窗中下方
  • 输入框聚焦输入文本
js
const input = document.getElementById('input');
let scrollTop = 0;
input.addEventListener('focus', () => {
  scrollTop = document.scrollingElement.scrollTop;
});
input.addEventListener('blur', () => {
  document.scrollingElement.scrollTo(0, scrollTop);
});

Copyright © 2023-present Blink