整理几个经常在H5移动端开发遇到的东西。
本篇主要是我个人的学习分享。
1、弹出数字键盘
<!-- 有“#” “*” 符号输入 -->
<input type="tel"> <!-- 纯数字 -->
<input pattern=“\d”>
安卓、IOS的表现形式应该不太一样,大家可以动手试试。运用正则之后,就不用关注input 的类型了。

2、调出系统的某些功能
<!-- 拨号 -->
<a href="tel:10086" >打电话给:10086 </a> <!--发送邮件-->
<a href="mailto:839626987@qq.com">发邮件给:839626987@qq.com</a> <!-- 发短信 -->
<a href=“sms:10086”>发短信给:</a> <!-- 选择照片或者拍摄照片 -->
<input type="file" accept="video"> <!-- 多选 -->
<input type="file" multiple>

3、解决active伪类失效
<body ontouchstart><body>
给body注册一个空事件即可。
4、滑动不顺畅,粘手。
一般出现在IOS设备中,自定义盒子使用了 overflow:auto || scroll 后出现的情况。
div{
--webkit-overflow-scrolling:touch;
}
5、最简单的rem自适应
众所周知,rem的值是根据 根元素的字体大小相计算的,但是我们每个设备的大小不一样,所以 根元素的字体大小 要动态设置。
html{
font-size:cale(100vw / 3.75);
}
body{
font-size: .14rem;
}
还有更多知识点,由于能力有限,暂且分享到此刻,如果有大佬晓得跟多,请评论出来分享给我们大家。

整理几个经常在H5移动端开发遇到的东西。的更多相关文章
- H5移动端开发遇见的东西
常见的有viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影 本文主要讲一些其他的或者实用的优化手段. 1. 弹出数字键盘 <!-- 有"#" & ...
- 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移动端开发 iPhone X适配
一. 媒体查询. @media screen and (device-width:375px) and (device-height:812px){ #header { height: 88px; p ...
- H5移动端开发
开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...
- h5移动端常见虚拟键盘顶起底部导航栏解决办法
在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...
- H5移动端手势密码组件
项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...
随机推荐
- 使用pycharm或idea提交项目到github
pycharm和idea的操作方式几乎一样,所以下面就以pycharm为例来介绍. 安装git https://git-scm.com/download/win 官网,下载慢,需翻墙 https:// ...
- nltk的安装和简单使用
使用python进行自然语言处理,有一些第三方库供大家使用: ·NLTK(Python自然语言工具包)用于诸如标记化.词形还原.词干化.解析.POS标注等任务.该库具有几乎所有NLP任务的工具. ·S ...
- android sdk tools里找不到draw9patch.bat 如何制作.9.png 格式图片
1.什么是.9.png格式 .9.png格式的图片可以在安卓平台指定拉伸区域,防止图片失真,一般用作背景图. 2.前提 最近项目中要用到.9.png格式图片,想着这个简单使用draw9patch.ba ...
- vue.js 本地解决跨域
1.config/index.js下添加proxyTable dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', ...
- Oracle11G_R2中共享服务器模式和专用服务器模式参数解释及设置
sys@MYTESTDB> show parameterNAME TYPE VALUE------------------------------------ ----------- ----- ...
- DSP程序中的布尔类型使用
在DSP程序中,布尔类型不能直接拿来用,要定义一下,可以通过定义为枚举类型来定义: typedef enum{FALSE=0,TRUE} BOOL; 一般枚举类型的定义是这样的:enum [枚举名] ...
- FTP 代码含义
vsftpd.config 部分参数含义anonymous_enable=NO #不允许匿名用户登陆 local_enable=YES #vsftpd所在系统的用户可以登录vsftpd write_e ...
- 图片转换成base64
let bgcImage = 'http://192.168.0.83:9080/files/4a9c3056-9b9b-4b41-b8e2-fd9f27023c41.jpg' let image = ...
- 使用脚本进行ansible批量主机的免密配置
应用场景: 在应用ansible的实际情况中,有一个很现实的问题,ansible是需要对主机做ssh免密登陆的,而挨个对主机做免密是非常的繁琐的,挨个敲IP不仅非常的繁琐而且容易出错,为解决这个问题, ...
- jquery选择器之模糊匹配
模糊匹配主要分为前导模糊匹配,后导模糊匹配和全文模糊匹配. 前导模糊匹配[^=] 例子:选择name前缀为aa的所有div的jQuery对象. $("div[name^='aa']" ...