HTML5移动端开发遇见的东西


Posted in HTML / CSS onOctober 11, 2019

常见的有viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影

本文主要讲一些其他的或者实用的优化手段。

1. 弹出数字键盘

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

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

HTML5移动端开发遇见的东西

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>

HTML5移动端开发遇见的东西

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

HTML5移动端开发遇见的东西

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失焦后页面没有回弹

HTML5移动端开发遇见的东西

一般出现在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. 禁止长按

HTML5移动端开发遇见的东西

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

想要禁止这些浏览器的默认行为,可以使用以下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;
}

效果如下:

HTML5移动端开发遇见的东西

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;
  }
}

效果如下:

HTML5移动端开发遇见的东西

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

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>

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

HTML / CSS 相关文章推荐
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 #HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 #HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 #HTML / CSS
canvas基础之图形验证码的示例
Jan 02 #HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 #HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 #HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 #HTML / CSS
You might like
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
第1次亲密接触PHP5(2)
2006/10/09 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
python cumsum函数的具体使用
2019/07/29 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
python实现学生管理系统开发
2020/07/24 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
C++的几个面试题附答案
2016/08/03 面试题
《鸟的天堂》教学反思
2014/02/27 职场文书
本科毕业生求职信
2014/06/15 职场文书
应届生找工作求职信
2014/06/24 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
关于环保的活动方案
2014/08/25 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
总经理司机岗位职责
2015/04/10 职场文书
质检员工作总结2015
2015/04/25 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript