移动端开发常用H5功能

489 阅读2分钟

记录日常用到和实现的功能

HTML

1、弹出数字键盘

<!-- 数字带# * -->
<input type="tel" />
// 实现phone格式化 123 4567 8911 并且光标换位置插入或者删除控制光标到当前输入位置不会到最后
private phoneformat (value: string) {
    let val = (this.$refs.inputPhone as any).value
    let selStart = (this.$refs.inputPhone as any).selectionStart // 选中区域左边界位置
    let mobileLen = val.length
    let value = val.replace(/\D/g, '').substring(0, 11)
    let len = value.length
    if (len > 3 && len < 8) {
      value = value.replace(/^(...)/g, '$1 ')
    } else if (len >= 8) {
      value = value.replace(/^(...)(....)/g, '$1 $2 ')
    }
    (this.$refs.inputPhone as any).value = value
    if (selStart !== mobileLen) {
      // 设置光标位置
      (this.$refs.inputPhone as any).selectionStart = (this.$refs.inputPhone as any).selectionEnd = selStart
    }
    this.phone = (this.$refs.inputPhone as any).value
}

<!-- 纯数字 推荐-->
<input type="number" pattern="\d*"/>

2、常用唤起原生URL scheme
常用的URL Scheme
scheme://[path][?query]
「scheme」:应用标识,表示应用在系统里的唯一标识
「path」:应用行为,表示应用某个页面或功能
「query」:应用参数,表示应用页面或应用功能所需的条件参数

<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086</a>
<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086</a>
<!-- 打开微信 -->
<a href="weixin://">打开微信</a>
<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>

3、常用meta标签

<!-- 禁止缩放 -->
<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">
<!-- 设置Safari全屏,在iOS7+无效 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 改变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)">
<!--保存网站到桌面时添加图标 ios和Android都支持-->
<link rel="apple-touch-icon-precomposed" href="/path/to/icon72x72@2x.png">
<!--仅Android支持-->
<link rel="icon" href="/path/to/icon72x72@2x.png">
<!-- 详细可参考 http://www.unclealan.cn/index.php/front/73.html -->
<!-- 保存网站到桌面时添加图标且清除默认光泽 -->
<link rel="apple-touch-icon-precomposed" href="pig.jpg">

4、chrome 小技巧 ,保持元素的hover状态
审查元素,选中a标签(或者需要hover的标签) 选择 force element state,选择相应的 :hover :active :focus :visited 等伪类

CSS

1、rem比例布局

// js方式
remAutoFontSize (width = 750) {
    const target = document.documentElement
    if (target.clientWidth >= 600) {
        target.style.fontSize = "80px"
    } else {
        target.style.fontSize = target.clientWidth / width * 100 + "px"
    }
}
remAutoFontSize()
window.addEventListener("resize", () => remAutoFontSize())
// html方式
html {
  font-size: calc(100vw / 7.5);
}
@media screen and (max-width: 1024px) {
  html {
    font-size: calc(100vw / 7.5);
  }
}

2、1px问题

// 1px空隙问题
.bgIcon {
    width: 0.8rem;
    height: 0.8rem;
    background: url("bg.jpg") no-repeat center/100% 100%;
}
// rem下 1px宽度问题
.line {
    margin: .32rem 0;
    height: 1px;
    transform: scaleY(0.5);
    opacity: 0.8;
    background: #dadae1;
}

3、媒体查询常用功能

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

4、iphonex安全区域适配头部&底部
详细参考 iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

padding-top: env(safe-area-bottom-height);

5、美化滚动占位
「::-webkit-scrollbar」:滚动条 「::-webkit-scrollbar-track」:轨道 「::-webkit-scrollbar-thumb」:滑块

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-image: linear-gradient(135deg, #09f, #3c9);
}

6、placeholder美化

.content input[class='addressText']::-webkit-input-placeholder {
    color: #86878f;
    font-weight: 400;
    font-family: PingFangSC, PingFangSC-Regular;
 }
 .content textarea[class='addressTextArea']::-webkit-input-placeholder {
    color: #86878f;
    font-weight: 400;
    margin-top: -0.02rem;
    font-family: PingFangSC, PingFangSC-Regular;
 }

7、line-height:nomal
line-height:nomal是怎么计算的
8、position: sticky 粘性布局 实现置顶

js

// copytoclipboard 复制到粘贴板
export default function (content: string, cb: Function) {
  const aux = document.createElement('input')
  aux.setAttribute('value', content)
  document.body.appendChild(aux)
  aux.select()
  const res = document.execCommand('copy')
  document.body.removeChild(aux)
  if (res && cb) {
    cb()
  }
}

参考链接 中高级前端必须注意的 40 条移动端 H5 坑位指南