本篇主要是我个人的学习分享。

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移动端开发遇到的东西。的更多相关文章

  1. H5移动端开发遇见的东西

    常见的有viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影 本文主要讲一些其他的或者实用的优化手段. 1. 弹出数字键盘 <!-- 有"#" & ...

  2. H5移动端开发入门知识以及CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  3. H5移动端开发vue+vux

    项目src中用到的npm包有(从编译打包到最终部署仍不能移除)1:vue             渐进式 JavaScript 框架   http://cn.vuejs.org/v2/guide/2: ...

  4. H5 移动端开发中 ios/安卓坑 和经验总结

    1. ios new时间对象,需要用逗号隔开传日期的方式, 不支持 new Date('2019-03-01 08:00:00') 格式: 支持以下两种方式: 2. ios个别版本对fixed的属性的 ...

  5. h5 移动端开发自适应 meta name="viewport"的使用总结

    本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...

  6. 关于H5移动端开发 iPhone X适配

    一. 媒体查询. @media screen and (device-width:375px) and (device-height:812px){ #header { height: 88px; p ...

  7. H5移动端开发

    开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...

  8. h5移动端常见虚拟键盘顶起底部导航栏解决办法

    在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...

  9. H5移动端手势密码组件

    项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...

随机推荐

  1. Grafana = 可视化分析 + 监控告警

    Grafana是一个完美地分析和监控的开发平台 可以把Grafana理解为一个可视化面板(Dashboard),其实Kibana也是一个分析和可视化平台,只不过在大家的日常使用中Kibana是跟着Lo ...

  2. Provide Several View Variants for End-Users 为最终用户提供多个视图变体

    In this lesson, you will learn how to provide several customized variants of the same View, and allo ...

  3. GO基础之异常处理

    一.异常 1. 错误指程序中出现不正常的情况,从而导致程序无法正常执行.•大多语言中使用try... catch... finally语句执行.假设我们正在尝试打开一个文件,文件系统中不存在这个文件. ...

  4. IS guide:Eric Steven Raymond in《How To Become A Hacker》

    Learn how to program.This, of course, is the fundamental hacking skill. If you don't know any comput ...

  5. Hackme: 1: Vulnhub Walkthrough

    下载链接: https://www.vulnhub.com/entry/hackme-1,330/ 网络扫描探测: ╰─ nmap -p1-65535 -sV -A 10.10.202.131 22/ ...

  6. Pluralsight 科技公司公布自己的avaScript 成为最受欢迎的开发技术

    根据 SDTimes 报道,Pluralsight 科技公司公布自己的 Technology Index,JavaScript 位居榜首. Pluralsight,是美国的一家面向软件开发者的在线教育 ...

  7. linux终端 tty pty pts等

    linux终端 tty pty pts等 20140608 Chenxin整理 系统变量TERM不知是用来干什么的?它的值有vt100,vt220等,这些值代表什么意思? 环境变量TERM设置为终端机 ...

  8. Windows自动执行应用程序或脚本(可以通过写bat文件定时关机等)

    1. Windows每天定时执行某个应用程序 1.1 右键我的电脑选择管理,并选择任务计划程序,如下 演示 --- 1.2 创建基本任务 演示 1.3 Windows每天定时关机设置参数 演示 1. ...

  9. JavaScript-----10.作用域

    1.作用域 一段程序代码中所用到的名字不是总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域.目的是为了提高程序的可靠性,更重要的是减少命名冲突. 在es6之前,js的作用域有:全 ...

  10. 构造函数new运算符进行了哪些操作

    new 运算符 1,实例化一个对象 2,将构造函数prototype对象赋值给对象__proto__属性 3,将对象作为函数this传进去,函数有return 并且是对象的话,就直接返回return的 ...