移动端 h5如何生成快捷方式_削微整理了几个经常在H5移动端开发遇到的东西

814d39080ccc7ef4542ac3e24348a17c.png

不用说我也知道,此类文章太多太多了,常见的譬如:

viewport强制浏览器全屏IOS的Web APP模式可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈)等等,太多啦,这些相信大家百度一下就可以查到很多资料

本篇文章主要是讲一些其他的或者优化手段。内容不多

1. 弹出数字键盘

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

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

7f758d5226720c8207aa1834e86bba92.gif

2. 调用系统的某些功能

<!-- 拨号 --><a href="tel:10086">打电话给: 10086</a>​<!-- 发送短信 --><a href="sms:10086">发短信给: 10086</a>​<!-- 发送邮件 --><a href="mailto:839626987@qq.com">发邮件给:839626987@qq.com</a>​<!-- 选择照片或者拍摄照片 --><input type="file" accept="image/*">​<!-- 选择视频或者拍摄视频 --><input type="file" accept="video/*">​<!-- 多选 --><input type="file" multiple>

同上 ‍♂️

bd5098216ea8180a41c46a6e8a76e51c.gif

3. 打开原生应用

<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
  • 某些浏览器会禁用此协议,比如微信内部浏览器(除非开了白名单)

8c53780cc8b0b5fb8335a21e04df8de9.gif

后面应该会专门写一篇文章用来探讨唤醒APP

4. 解决active伪类失效

<body ontouchstart></body>

body注册一个空事件即可

5. 忽略自动识别

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

当页面上的内容包含了手机号/邮箱等,会自动转换成可点击的链接

比如你有如下代码:

 <p>13192733603</P>

但是有些浏览器会识别为手机,并且可以点击拨号

6. 解决input失焦后页面没有回弹

e7b29692b33585d31cff8ee22be0cab5.gif

一般出现在IOS设备中的微信内部浏览器,出现的条件为:

  • 页面高度过小
  • 聚焦时,页面需要往上移动的时候

所以一般input在页面上方或者顶部都不会出现无法回弹

解决办法为,在聚焦时,获取当前滚动条高度,然后失焦时,赋值之前获取的高度:

<template><input type="text" @focus="focus" @blur="blur"></template>​<script>export default {data() {return {scrollTop: 0}},methods: {focus() {this.scrollTop = document.scrollingElement.scrollTop;},blur() {document.scrollingElement.scrollTo(0, this.scrollTop);}}}</script>

6. 禁止长按

c28f615d0a1160e7cae53d309eb7dc5f.gif

以上行为可以总结成这几个(每个手机以及浏览器的表现形式不一样):长按图片保存长按选择文字长按链接/手机号/邮箱时呼出菜单

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

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

7. 滑动不顺畅,粘手

一般出现在IOS设备中,自定义盒子使用了overflow: auto || scroll后出现的情况。

优化代码:

 div {-webkit-overflow-scrolling: touch;}

8. 屏幕旋转为横屏时,字体大小会变

具体出现的情况不明 ,有时候有有时候没有,欢迎指出。

优化代码:

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

9. 最简单的rem自适应

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

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

效果如下:

74d8a601f4716b7c28fcec140949531d.gif

像我一般的话,直接搞lib-flexiblepostcss-pxtorem就完事啦!

10. 滑动穿透

当你想在出现遮罩的时候,锁住用户的滚动行为,你可以这么做。

假设HTML结构如下:

 <div class="mask"><div class="content">我是弹框</div></div>

CSS样式如下:

.mask {position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background-color: rgba($color: #333, $alpha: .6);​.content {padding: 20px;background-color: #fff;width: 300px;}}

可以看到,当在遮罩上滑动的时候,是会穿透到父节点的,最简单的办法就是阻住默认行为:

document.querySelector(".mask").addEventListener("touchmove", event => {event.preventDefault({passive: false});});

如果在vue中,你可以这么写:

<div class="mask" @touchumove.prevent></div>

如果.content也有滚动条,那么只要阻止遮罩本身就行:

document.querySelector(".mask").addEventListener("touchmove", event => {if (event.target.classList.contains("mask")) event.preventDefault({passive: false});});

或者:

 <div class="mask" @touchumove.self.prevent></div>

这样,当出现遮罩的时候用户的滑动就会被锁住啦

1px边框唤醒APP后面会单独出文章,因为涉及的内容比较多

作者:发际线还在
链接:稍微整理了几个经常在H5移动端开发遇到的东西 - 发际线还在 - 博客园
来源:博客园

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SCI至上只是结果,而不是原因

来源&#xff1a;赵斌科学网博客我从来不认为SCI一无是处&#xff0c;相反&#xff0c;我们大多数科研人员应该感谢它。中国科研评价体系中的的问题&#xff0c;不是破四唯&#xff0c;破SCI至上&#xff0c;而是打破特权、消除歧视。近日&#xff0c;教育部和科技部联合发文&a…

spark mysql 交互_Spark - 直接操作数据源 MySQL

如果我们的Mysql服务器性能不咋滴&#xff0c;但是硬盘很够&#xff0c;如何才能做各种复杂的聚合操作&#xff1f;答案就是使用spark的计算能力的&#xff0c;我们可以将mysql数据源接入到spark中。读取val mysqlDF spark.read.format("jdbc").option("driver…

maven+SSM框架工程搭建

1.百度下载 maven 和 tomcat 安装 配置环境变量 2.使用最新版eclipse 集成maven maven conf文件夹下的settings.xml文件配置存放maven仓库的位置&#xff0c;D:\hongzhimei\repository 为存放路径 3.新建工程 项目原型选择webapp项目 在buildPath中选择Edit更改为工作空间默认的…

flask session_Flask干货:Flask数据交换——Session的使用

上一次我们学习了Cookie&#xff0c;知道Cookie是保存在客户端的。那么有的小伙伴就问了&#xff0c;难道只有客户端能保存&#xff1f;服务器就不可以保存吗&#xff1f;&#xff01;当然可以&#xff01;Session就是另一种记录用户状态的机制。Flask的Session是基于Cookie实现…

神经科学中的数学之美

来源&#xff1a;数学中国“不偏袒地讲&#xff0c;数学&#xff0c;不但掌握着真理&#xff0c;还是至美之物。”——罗素关于美学最新的神经学研究显示&#xff0c;视觉、听觉和道德上的美感体验都与“情绪化大脑”的同一个区域有关&#xff1a;内侧眶额叶皮层&#xff08;me…

手机端富文本编辑器_谷歌Pixel系列手机每月更新无痛刷机技巧

本文适合小白&#xff0c;高手可以关闭。&#xff08;以下技巧基本为Pixel3操作&#xff0c;window7平台&#xff0c;Pixel系列手机大同小异&#xff09;谷歌Pixel系列手机属于小众手机&#xff0c;当中刷机有技巧&#xff0c;本人也是小白&#xff0c;经过无数次的实践经验得出…

什么是数据中台?全面解读数据中台

来源&#xff1a;与数据同行伴随着云计算、大数据、人工智能等IT技术迅速发展及与传统行业实现快速融合&#xff0c;一场由数字化和智能化转型带来的产业变革正在孕育。随着企业规模不断扩大、业务多元化——中台服务架构的应运而生。“中台”早期是由美军的作战体系演化而来的…

add结果 bigdecimal_java.math.BigDecimal.add(BigDecimal augend)方法

全屏java.math.BigDecimal.add(BigDecimal augend)方法java.math.BigDecimal.add(BigDecimal augend) 返回一个BigDecimal&#xff0c;其值为(this augend)&#xff0c;其标度为 max(this.scale(), augend.scale())。声明以下是java.math.BigDecimal.add()方法的声明public Bi…

python导出oracle数据到excel_【python】 python 查询oracle数据生成excel

接上篇安装好了cx_Oracle.msi MySql.msi 下载安装 xlwt-0.7.5.tar.gz&#xff0c; 到安装目录下 命令窗口cmd下执行 python setup.py install即可 被引用的文件&#xff1a; # coding: utf-8 # xlswriter.py # http://pypi.python.org/pypi/xlwt import xlwt class XLSWriter(o…

指挥控制系统中的自然智能和人工智能

来源&#xff1a;人机与认知实验室【编者按&#xff1a;为什么美军的“深绿系统”不好用&#xff1f;并常常被指挥员所诟病。但这是指控系统智能化的关键之所在&#xff01;你也许会简单地说&#xff1a;“是人、机、环境系统失调造成的”&#xff0c;若进一步问“那是怎样失调…

Sublime Text 3 搭建 React.js 开发环境

Sublime有很强的自定义功能&#xff0c;插件库很庞大&#xff0c;针对新语言插件更新很快&#xff0c;配合使用可以快速搭建适配语言的开发环境。 1. babel-sublime 支持ES6&#xff0c; React.js, jsx代码高亮&#xff0c;对 JavaScript, jQuery 也有很好的扩展。关于 babel 的…

AI造假 vs AI打假 终结“猫鼠游戏”不能只靠技术

来源&#xff1a;和讯网人脸识别作为生物识别中的重要手段&#xff0c;成为了近年身份识别中最热门的领域。但与人脸识别技术共同发展的&#xff0c;还有借助机器学习系统、图像视频和音频内容&#xff0c;更改人脸、物体或环境呈现方式的深度伪造技术。随着这一技术的日趋成熟…

你好AI丨重读图灵经典之作,九条反驳意见引人深思

来源&#xff1a; AI科技评论编译 | 丛末、蒋宝尚当一台计算机能够骗过人类&#xff0c;让他们相信它就是一个人的时候&#xff0c;就能够被称作智能。编者按&#xff1a;对于艾伦图灵&#xff0c;相信大家都并不陌生&#xff0c;作为人工智能鼻祖&#xff0c;图灵的诸多观点即…

java 比较源文件_Beyond Compare比较Java源代码文件的操作方法

今天小编就带大家来共同学习BeyondCompare如何比较Java源代码文件希呢?望可以帮助到有需要的小伙伴哦&#xff0c;下面就是详细完整的操作步骤。打开BeyondCompare&#xff0c;在主页面左侧目录下选择文本比较会话&#xff0c;打开会话操作界面。分别单击比较会话界面“打开文…

关于研究的方法

转载于:https://www.cnblogs.com/freedommovie/p/6769717.html

【学术快报】韩世辉课题组在《eLife》发表论文揭示群体冲突中复仇的神经生物学机制...

来源&#xff1a;脑科学在群体冲突中&#xff0c;看到对手伤害自己的队友会激发报复行为&#xff0c;去攻击对手。这一复杂社会行为贯穿人类历史&#xff0c;阐明其机理具有重要科学意义和社会价值。心理学研究提出对“内群体的爱”&#xff08;ingroup love&#xff09;或/和对…

《面向对象程序设计》课程作业二

github链接作业链接编写一个程序&#xff0c;要求根据给定的圆的半径求圆的面积&#xff0c;并将求得的结果打印出来。……建立一个工程&#xff0c;将程序写成两个.cpp和一个.h的形式。 这个问题倒是没什么难的&#xff0c;但对于同学们来说是一个上手模块化的好开端。从现在开…

报告 | 超级智能城市2.0 – 人工智能引领新风尚(附下载)

来源&#xff1a;智慧城市决策参考未来智能实验室是人工智能学家与科学院相关机构联合成立的人工智能&#xff0c;互联网和脑科学交叉研究机构。未来智能实验室的主要工作包括&#xff1a;建立AI智能系统智商评测体系&#xff0c;开展世界人工智能智商评测&#xff1b;开展互联…

icmp协议_ICMP协议【41】

1、回顾TCP/IP协议栈为了更有效地转发IP数据报和提高交付成功的机会......2、ICMP协议的简介(1)ICMP&#xff0c;全称为Internet Control Message Protocol&#xff0c;即网际控制报文协议、网际控制消息协议。(2)它是TCP/IP协议族的一个子协议&#xff0c;用于在IP主机、路由器…

java的字节码无法显示_【java】查看Java字节码文件内容的方法+使用javap找不到类 解决方法...

研究synchronized底层实现&#xff0c;涉及到查看java字节码的需要前提是&#xff0c;你的PC已经成功安装了JDK并别配置了环境变量。查看方法一.javap查看简约字节码方式1.准备一个java文件例如&#xff0c;文件所在目录在此处Student.java文件内容如下&#xff1a;packagecom.…