H5移动端开发遇见的东西
常见的有viewport
、强制浏览器全屏
、IOS的Web APP模式
、可点击元素出现阴影
本文主要讲一些其他的或者实用的优化手段。
1. 弹出数字键盘
<!-- 有"#" "*"符号输入 -->
<input type="tel">
<!-- 纯数字 -->
<input pattern="\d*">
安卓
跟IOS
的表现形式应该不一样,大家可以自己试试。当运用了正则pattern
后,就不用关注input
的类型了。
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>
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
- 某些浏览器会禁用此协议,比如微信内部浏览器(除非开了白名单)
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失焦后页面没有回弹
一般出现在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>
7. 禁止长按
以上行为可以总结成这几个(每个手机以及浏览器的表现形式不一样):长按图片保存
、长按选择文字
、长按链接/手机号/邮箱时呼出菜单
。
想要禁止这些浏览器的默认行为,可以使用以下CSS
:
// 禁止长按图片保存
img {
-webkit-touch-callout: none;
pointer-events: none; // 像微信浏览器还是无法禁止,加上这行样式即可
}
// 禁止长按选择文字
div {
-webkit-user-select: none;
}
// 禁止长按呼出菜单
div {
-webkit-touch-callout: none;
}
8. 滑动不顺畅,粘手
一般出现在IOS
设备中,自定义盒子使用了overflow: auto || scroll
后出现的情况。
优化代码:
div {
-webkit-overflow-scrolling: touch;
}
9. 屏幕旋转为横屏时,字体大小会变
具体出现的情况不明,有时候有有时候没有,欢迎指出。
优化代码:
* {
-webkit-text-size-adjust: 100%;
}
10. 最简单的rem自适应
大家都知道,rem
的值是根据根元素的字体大小
相对计算的,但是我们每个设备的大小不一样,所以根元素的字体大小
要动态设置
html {
font-size: calc(100vw / 3.75);
}
body {
font-size: .14rem;
}
效果如下:
11. 滑动穿透
当你想在出现遮罩
的时候,锁住用户的滚动行为,你可以这么做。
假设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();
});
如果在vue
中,你可以这么写:
<div class="mask" @touchumove.prevent></div>
如果.content
也有滚动条,那么只要阻止遮罩
本身就行:
document.querySelector(".mask").addEventListener("touchmove", event => {
if (event.target.classList.contains("mask")) event.preventDefault();
});
或者:
<div class="mask" @touchumove.self.prevent></div>
这样,当出现遮罩
的时候用户的滑动就会被锁住啦
最后
参考文章:https://juejin.im/post/5d6e1899e51d453b1e478b29
H5移动端开发遇见的东西的更多相关文章
- 整理几个经常在H5移动端开发遇到的东西。
本篇主要是我个人的学习分享. 1.弹出数字键盘 <!-- 有“#” “*” 符号输入 --> <input type="tel"> <!-- 纯数字 ...
- H5移动端开发入门知识以及CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- H5移动端开发vue+vux
项目src中用到的npm包有(从编译打包到最终部署仍不能移除)1:vue 渐进式 JavaScript 框架 http://cn.vuejs.org/v2/guide/2: ...
- H5 移动端开发中 ios/安卓坑 和经验总结
1. ios new时间对象,需要用逗号隔开传日期的方式, 不支持 new Date('2019-03-01 08:00:00') 格式: 支持以下两种方式: 2. ios个别版本对fixed的属性的 ...
- h5 移动端开发自适应 meta name="viewport"的使用总结
本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度: 设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...
- H5移动端开发
开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...
- 关于H5移动端开发 iPhone X适配
一. 媒体查询. @media screen and (device-width:375px) and (device-height:812px){ #header { height: 88px; p ...
- h5移动端常见虚拟键盘顶起底部导航栏解决办法
在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...
- H5移动端手势密码组件
项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...
随机推荐
- ELK-logstash基本用法
一:logstash介绍 Logstash在elk系统中为数据存储,报表查询和日志解析创建了一个功能强大的管道链.Logstash提供了多种多样的 input,filters,codecs和outpu ...
- SpringAOP在web应用中的使用
之前的aop是通过手动创建代理类来进行通知的,但是在日常开发中,我们并不愿意在代码中硬编码这些代理类,我们更愿意使用DI和IOC来管理aop代理类.Spring为我们提供了以下方式来使用aop框架 一 ...
- irules
BIG-IP系统iRules基本概念_v11.6.1 2017年10月10日 00:35:16 ifelif 阅读数:1097 1 iRules介绍 什么是iRule iRule是BIG-IP本地 ...
- B树?这篇文章彻底看懂了!
前言 索引,相信大多数人已经相当熟悉了,很多人都知道 MySQL 的索引主要以 B+ 树为主,但是要问到为什么用 B+ 树,恐怕很少有人能把前因后果讲述完整.本文就来从头到尾介绍下数据库的索引. 索引 ...
- elasticsearch的快速安装
在阿里云服务器快速安装ElasticSearch 1.安装好java的jdk环境 2.使用wget下载elasticsearch安装包,wget的速度比较满,如果等不及的话,可以先下载好安装包再上传解 ...
- Python学习之while
count = 0while count <= 5: print('人生苦短,我用Python!', 'count = ', count) count += 1
- CentOS7下部署java+tomcat+mysql项目及遇到的坑
CentOS 7 下安装部署java+tomcat+mysql 前置:CentOS7安装:https://jingyan.baidu.com/article/b7001fe1d1d8380e7382d ...
- Paper | MFQE 2.0: A New Approach for Multi-frame Quality Enhancement on Compressed Video
目录 1. 要点 2. 压缩视频特性分析 2.1 质量波动 2.2 帧间相关性 3. 方法 3.1 分类器 3.2 好帧运动补偿 3.3 质量增强网络 4. 实验 4.1 差帧质量提升效果 4.2 总 ...
- Zuul Swagger 整合
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...
- UWP 在非UI线程中更新UI
大家都知道,不可以在 其他线程访问 UI 线程,访问 UI 线程包括给 依赖属性设置值.读取依赖属性.调用方法(如果方法里面修改了依赖属性)等.一旦访问UI线程,那么就会报错,为了解决这个问题,需要使 ...