Posted by 调用系统功能
<!-- 拨打电话 -->
<a href="tel:10010">拨打电话给10010</a>
<!-- 发送短信 -->
<a href="sms:10010">发送短信给10010</a>
<!-- 发送邮件 -->
<a href="mailto:xxx@mail.com">发送邮件给xxx</a>
<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">
<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">
<!-- 多选文件 -->
<input type="file" multiple>弹出数字键盘
<!-- 纯数字带#和* -->
<input type="tel">
<!-- 纯数字 -->
<input type="number" pattern="\d*">唤醒原生应用
<!-- 打开微信 -->
<a href="weixin://">打开微信</a>
<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>
<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>监听屏幕旋转
/* 竖屏 */
@media all and (orientation: portrait) {
/* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
/* 自定义样式 */
}禁止滚动传播
.elem {
overscroll-behavior: contain;
}禁止页面缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">禁止页面缓存
<meta http-equiv="Cache-Control" content="no-cache">禁止长按操作
声明user-select:none禁止用户长按操作和选择复制。
* {
/* pointer-events: none; */ /* 微信浏览器还需附加该属性才有效 */
user-select: none; /* 禁止长按选择文字 */
-webkit-touch-callout: none;
}但声明user-select:none会让<input>和<textarea>无法输入文本，可对其声明user-select:auto排除在外。
input,
textarea {
user-select: auto;
}自定义表单控件式样
button,
input,
select,
textarea {
appearance: none;
/* 自定义样式 */
}自定义滚动条
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-image: linear-gradient(135deg, #09f, #3c9);
}简化懒性加载
函数IntersectionObserver，它提供一种异步观察目标元素及其祖先元素或顶级文档视窗交叉状态的方法。详情可参照MDN文档，在此不作过多介绍。
懒性加载的第一种使用场景：图片懒加载。只需确认图片进入可视区域就赋值加载图片，赋值完成还需对图片停止监听。
<img src="pig.jpg">
<!-- 很多<img> -->const imgs = document.querySelectorAll("img.lazyload");
const observer = new IntersectionObserver(nodes => {
nodes.forEach(v => {
if (v.isIntersecting) { // 判断是否进入可视区域
v.target.src = v.target.dataset.src; // 赋值加载图片
observer.unobserve(v.target); // 停止监听已加载的图片
}
});
});
imgs.forEach(v => observer.observe(v));懒性加载的第二种使用场景：下拉加载。在列表最底部部署一个占位元素且该元素无任何高度或实体外观，只需确认占位元素进入可视区域就请求接口加载数据。
<ul>
<li></li>
<!-- 很多<li> -->
</ul>
<!-- 也可将#bottom以<li>的形式插入到<ul>内部的最后位置 -->
<div id="bottom"></div>
const bottom = document.getElementById("bottom");
const observer = new IntersectionObserver(nodes => {
const tgt = nodes[0]; // 反正只有一个
if (tgt.isIntersecting) {
console.log("已到底部，请求接口");
// 执行接口请求代码
}
})
observer.observe(bottom);1像素边框
.elem {
position: relative;
width: 200px;
height: 80px;
&::after {
position: absolute;
left: 0;
top: 0;
border: 1px solid #f66;
width: 200%;
height: 200%;
content: "";
transform: scale(.5);
transform-origin: left top;
}
}多行文本溢出
.elem {
width: 400px;
line-height: 30px;
font-size: 20px;
&.sl-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.ml-ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}本文链接地址: web移动端开发指南