移动端H5开发过程中的一点笔记

逆旅过客
305 阅读3分钟

1、调用系统功能

拨打电话

<a href="tel:10010">拨打电话给客服</a>

发送短信

<a href="sms:10086">发送短信给客服</a>

发送邮件

<a href="mailto:xxx@xxx.com">发送邮件给xxx</a>

选择照片或拍摄照片

<input type="file" accept="image/*">

选择视频或拍摄视频

<input type="file" accept="video/*">

多选文件

<input type="file" multiple>

2、忽略自动识别

忽略自动识别电话

<meta name="format-detection" content="telephone=no">

忽略自动识别邮箱

<meta name="format-detection" content="email=no">

忽略自动识别电话和邮箱

<meta name="format-detection" content="telephone=no, email=no">

3、弹出数字键盘

纯数字带#和*

<input type="tel">

纯数字

<input type="number" pattern="\d*">

4、唤起原生app应用

打开微信

<a href="weixin://">打开微信</a>

打开支付宝

<a href="alipays://">打开支付宝</a>

打开支付宝的扫一扫

<a href="alipays://platformapi/startapp?saId=10000007">

打开支付宝的蚂蚁森林

<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

5、禁止页面缩放

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

6、禁止页面缓存

禁止浏览器缓存

<meta http-equiv="Cache-Control" content="no-cache">

7、禁止字母大写

<meta http-equiv="Cache-Control" content="no-cache">

8、针对Safari配置

设置Safari全屏，在iOS7+无效

改变Safari状态栏样式，

可选default/black/black-translucent，需在上述全屏模式下才有效 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

添加页面启动占位图

<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">

保存网站到桌面时添加图标

<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">

保存网站到桌面时添加图标且清除默认光泽

<link rel="apple-touch-icon-precomposed" href="pig.jpg">

9、针对其他浏览器配置

强制QQ浏览器竖屏

<meta name="x5-orientation" content="portrait">

强制QQ浏览器全屏

<meta name="x5-fullscreen" content="true">

开启360浏览器极速模式

<meta name="renderer" content="webkit">

10、让:active有效，让:hover无效

 <body ontouchstart></body>

11、自动适应布局

 function AutoResponse(width = 750) {
    const target = document.documentElement;
    if (target.clientWidth >= 600) {
        target.style.fontSize = "80px";
    } else {
        target.style.fontSize = target.clientWidth / width * 100 + "px";
    }
}
AutoResponse();
window.addEventListener("resize", () => AutoResponse());

12、自动适应背景

.elem {
    width: 1rem;
    height: 1rem;
    background: url("pig.jpg") no-repeat center/100% 100%;
}

13、监听屏幕旋转

 /* 竖屏 */ 
@media all and (orientation: portrait) {
    /* 自定义样式 */
} 
/* 横屏 */
@media all and (orientation: landscape) {
    /* 自定义样式 */
}

14、支持弹性滚动

(通过声明overflow-scrolling:touch调用系统原生滚动事件优化弹性滚动，增加页面滚动的流畅度。)

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

15、禁止滚动传播

 .elem {
    overscroll-behavior: contain;
}

16、禁止屏幕抖动

 body {
    padding-right: calc(100vw - 100%);
}

17、禁止长按操作

 * {
    /* pointer-events: none; // 微信浏览器还需附加该属性才有效
    user-select: none; // 禁止长按选择文字
    -webkit-touch-callout: none;
}
<!--会让<input>和<textarea>无法输入文本,加上以下样式可以输入-->
input,
textarea {
    user-select: auto;
}

18、禁止字体调整

 * { text-size-adjust: 100%; }

19、禁止高亮显示

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

20、禁止动画闪屏

 .elem {
    perspective: 1000;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

21、美化表单外观

 button,
input,
select,
textarea {
    appearance: none;
    /* 自定义样式 */
}

22、美化滚动条样式

::-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);
}

23、美化输入框

placeholder
                input::-webkit-input-placeholder {
    color: #66f;
}

24、对齐输入占位

 input {
    line-height: normal;
}

25、对齐下拉选项(右对齐)

 select option {
    direction: rtl;
}

26、修复点击无效

 .elem {
    cursor: pointer;
}

27、识别文本换行

 * {
    white-space: pre-line;
}

28、开启硬件加速

 .elem {
    transform: translate3d(0, 0, 0);
    /* transform: translateZ(0); */
}

29、描绘像素边框

 .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;
    }
}

30、禁止点击穿透

(引入fastclick可使用click事件代替tap事件)

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

31、禁止滑动穿透

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 = "";
});

32、支持往返刷新

 // 在新页面监听页面销毁事件
window.addEventListener("onunload", () => {
    // 执行旧页面代码
});

33、解析有效日期

const date = "2019-03-31 21:30:00";
new Date(date.replace(/\-/g, "/"));

34、修复高度坍塌

const input = document.getElementById("input");
let scrollTop = 0;
input.addEventListener("focus", () => {
    scrollTop = document.scrollingElement.scrollTop;
});
input.addEventListener("blur", () => {
    document.scrollingElement.scrollTo(0, this.scrollTop);
});

35、回到顶部

 const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView({ 
behavior: "smooth" }));
avatar
文章
阅读
粉丝