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

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. 整理h5移动端适配方案

    <使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...

  2. Maven详解(非原创)

    文章大纲 一.maven功能介绍二.maven整合javaweb案例三.私服应用(了解)四.总结五.相关资料下载六.参考文章 一.maven功能介绍 1. maven基本介绍   Maven的Apac ...

  3. docker安装Mysql8.0并挂载外部配置和数据

    环境 CentOS Linux release 7.7.1908 (Core) 拉取Mysql8.0 镜像 docker pull mysql:8.0.18 创建挂载目录 mkdir -p /home ...

  4. centos7.6 安装Tomcat-8.5.39

    #关闭防火墙 systemctl stop firewalld.service systemctl disable firewalld setenforce sed -i '/SELINUX=/ s/ ...

  5. day98_12_2 数据分析工具包。

    1.numpy 在python中,数据分析可以使用numpy. 首先可以安装ipython解释器,在终端,代码变得可视化,界面有高亮显示: pip Install ipython 除了可以在终端编程之 ...

  6. Unable to open debugger port: java.net.SocketException

    网上都说是tomcat端口被占用,其实不是,这是因为文件权限不够,脚本不能执行,debug当然不能接受网络连接的数据 可以在Event Log里看到 所以只需要更改文件的级别就可以了(可读可写可执行) ...

  7. Linux查看文件或文件夹大小du命令

    du命令用于显示目录或文件的大小. du会显示指定的目录或文件所占用的磁盘空间. 语法: du [-abcDhHklmsSx][-L <符号连接>][-X <文件>][--bl ...

  8. IT兄弟连 HTML5教程 HTML5表单 HTML表单设计1

    表单是PHP程序中最常使用的收集站点访问者信息的数据输入界面.通过表单浏览器获取用户的输入数据,并传送给Web服务器的脚本程序中,以各种不同的方式进行处理.在表单中提供了多种输入方式,包括文本输入域. ...

  9. C和C++常见误区以及问题整理

    c和c++的关系 c是面向过程的语言,c++是在c的基础上扩展的面向对象的编程语言. c++具备c的所有功能,对c的库完全兼容. c++的标准在98年确定,在那之前已经有一些库大量使用. 新标准中,推 ...

  10. 【朝花夕拾】Android自定义View篇之(二)Canvas常用功能

    前言 转在请申明,转自[https://www.cnblogs.com/andy-songwei/p/10960012.html],谢谢! 上一篇讲View的绘制流程中讲到过,最后一步是draw流程, ...