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

1. 弹出数字键盘

 <!-- 有"#" "*"符号输入 -->
 <input type="tel">
 ​
 <!-- 纯数字 -->
 <input pattern="\d*">

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

 

打开原生应用

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

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

URL Scheme的基本格式如下:

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

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

注意事项:

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

 

 

解决active伪类失效

 <body ontouchstart></body>

忽略自动识别

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

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

 // 禁止长按图片保存
 img {
   -webkit-touch-callout: none;
   pointer-events: none; // 像微信浏览器还是无法禁止,加上这行样式即可
 }
 ​
 // 禁止长按选择文字
 div {
   -webkit-user-select: none;
 }
 ​
 // 禁止长按呼出菜单
 div {
   -webkit-touch-callout: none;
 }

最简单的rem自适应

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

 html {
  font-size: calc(100vw / 3.75);
 }
 ​
 body {
   font-size: .14rem;
 }

效果如下:

 



 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值