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实现移动端手势密码组件,支持手势密码设置和 ...
随机推荐
- 《Java数据结构》链表结构(单向链表,双向链表)
单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对链表的访问要通过顺序读取从头部开始:链表是使用指针进行构造的列表:又称为结点列表,因为链表是由一个个结点组装起来的:其中每个结点都有指 ...
- C# WPF实用的注册窗体
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
- 【玩转SpringBoot】让错误处理重新由web服务器接管
其实web服务器是会处理错误的 在web.xml还是随处可见的年代时(确实有点老黄历了),下面的这些配置应该都不陌生. 根据错误代码处理错误,如下图01: 根据异常类型处理错误,如下图02: 不过我们 ...
- 面试连环炮系列(十五):说说Eureka的高可用方案
说说Eureka的高可用方案 至少3个Eureka实例才能满足高可用,配置方法如下: 准备三个节点node1,node2,node3. 在每个实例的application.xml文件里加入 eurek ...
- Internet History,Technology,and Security -Transport Control Protocol(TCP)(Week6)
Week6 Technology: Transport Control Protocol(TCP) Welcome to Week 6 of IHTS. We are in our second we ...
- java存储数据到本地txt文件中
java存储数据,方便打印日志等 1.会覆盖以前的数据 try { File writeName = new File("D:\\data.txt"); // 相对路径,如果没有则 ...
- 百度大脑UNIT3.0智能对话技术全面解析
智能客服.智能家居.智能助手.智能车机.智能政务……赋予产品智能对话能力是提升产品智能化体验.高效服务的重要手段,已经开始被越来越多的企业关注并布局.然而,智能对话系统搭建涉及NLP.知识图谱.语音等 ...
- 简单实用的git命令
1.下载项目 先进入目录然后使用jit $ git clone +"url" 2.项目配置 $ composer install 3.上传项目 $ git add . () $ g ...
- 在Ubuntu 18.04系统上安装Pydio Cells详细图文教程
前言 基于云的协作工具Pydio cell提供了一系列灵活的特性,包括应用内消息传递.文件共享和版本控制.下面逐步介绍安装过程. Pydio cell最初是一个简单的基于云的文件共享系统,但经过升 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...