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

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. numpy代码片段合集

    生成shape为(num_examples, num_inputs),符合0-1分布的数据. np.random.normal(0, 1, (num_examples, num_inputs))

  2. 开启Hyper-V

    开启Hyper-V 添加方法非常简单,把以下内容保存为.cmd文件,然后以管理员身份打开这个文件.提示重启时保存好文件重启吧,重启完成就能使用功能完整的Hyper-V了. pushd "%~ ...

  3. Android 监听手机锁屏的工具类

    自定义 ScreenListener package com.example.teagardenhd.Listener; import android.content.BroadcastReceive ...

  4. GIL以及协程

    GIL以及协程 一.GIL全局解释器锁 演示 ''' python解释器: - Cpython c语言 - Jpython java 1.GIL:全局解释器锁 - 翻译:在同一个进程下开启的多个线程, ...

  5. Linux系统iptables与firewalld防火墙

    iptables iptables服务用于处理或过滤流量的策略条目(规则),多条规则可以组成一个规则链,而规则链则依据数据包处理位置的不同进行分类. 在进行路由选择前处理数据包(PREROUTING) ...

  6. 使用Eclipse开发Web项目（JSP）——简单登录、无sql

    1.使用Eclipse开发Web项目(JSP) tomcat 2.在Eclipse中创建的Web项目: 浏览器可以直接访问webContent中的文件 例如http://localhost:8080/ ...

  7. cordova+vue混合式开发App

    应要求第一次使用cordova打包了一下vue写的app项目,期间遇到了不少问题,整理一下流程并记录一下常见问题吧.        cordova打包项目需要的环境配置啥的就不具体讲啦,百度一下很多教 ...

  8. vue element-ui父列表和子列表同时出现时的bug

    在项目中遇到这样的问题 当第一个父列表下的子列表选择了1,切换到第二个父列表的时候,也会默认选择1 我最开始是计划通过修改子列表的default-active为-1,结果不行 后来发现出现这个问题的原 ...

  9. 2019阿里天猫团队Java高级工程师面试题之第三面

    2019阿里天猫团队Java高级工程师面试题之第一面 2019阿里天猫团队Java高级工程师面试题之第二面 1.说说MySQL的锁并发?加锁的机制是什么? https://www.cnblogs.co ...

  10. 激活函数-Activation Function

    该博客的内容是莫烦大神的授课内容.在此只做学习记录作用. 原文连接:https://morvanzhou.github.io/tutorials/machine-learning/tensorflow ...