H5移动端开发遇到问题,和方案

╰半夏微凉° 2023-02-21 11:54 118阅读 0赞

1. 弹出数字键盘

  1. <!-- 有"#" "*"符号输入 -->
  2.  <input type="tel">
  3.  ​
  4.  <!-- 纯数字 -->
  5.  <input pattern="\d*">

安卓跟IOS的表现形式应该不一样，大家可以自己试试。当运用了正则pattern后，就不用关注input的类型了

format_png

打开原生应用

  1. <a href="weixin://">打开微信</a>
  2.  <a href="alipays://">打开支付宝</a>
  3.  <a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫功能</a>
  4.  <a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

这种方式叫做URL Scheme，是一种协议，一般用来访问APP或者APP中的某个功能/页面（如唤醒APP后打开指定页面或者使用某些功能）

URL Scheme的基本格式如下：

  1. 行为(应用的某个功能/页面)    
  2.              |
  3.  scheme://[path][?query]
  4.     |               |
  5.  应用标识       功能需要的参数

一般是由APP开发者自己定义，比如规定一些参数或者路径让其他开发者来访问，就像上面的例子

注意事项：

  • 唤醒APP的条件是你的手机已经安装了该APP
  • 某些浏览器会禁用此协议，比如微信内部浏览器（除非开了白名单）

format_png 1

解决active伪类失效

  1. <body ontouchstart></body>

忽略自动识别

  1. <!-- 忽略浏览器自动识别数字为电话号码 -->
  2.  <meta name="format-detection" content="telephone=no">
  3.  ​
  4.  <!-- 忽略浏览器自动识别邮箱账号 -->
  5.  <meta name="format-detection" content="email=no">

想要禁止这些浏览器的默认行为，可以使用以下CSS：

  1. // 禁止长按图片保存
  2.  img {
  3.    -webkit-touch-callout: none;
  4.    pointer-events: none; // 像微信浏览器还是无法禁止，加上这行样式即可
  5.  }
  6.  ​
  7.  // 禁止长按选择文字
  8.  div {
  9.    -webkit-user-select: none;
  10.  }
  11.  ​
  12.  // 禁止长按呼出菜单
  13.  div {
  14.    -webkit-touch-callout: none;
  15.  }

最简单的rem自适应

大家都知道，rem的值是根据根元素的字体大小相对计算的，但是我们每个设备的大小不一样，所以根元素的字体大小要动态设置

  1. html {
  2.   font-size: calc(100vw / 3.75);
  3.  }
  4.  ​
  5.  body {
  6.    font-size: .14rem;
  7.  }

效果如下：

format_png 2

发表评论

表情：
评论列表 （有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读