程序员经验分享-hwhale

移动端H5开发常用小技巧（总结）

2023-05-16

本篇文章给大家整理一些在移动端H5开发常见的问题给大家做下分享，这里很多是在开发过程中遇到的大坑或者遭到过吐糟的问题，希望能给大家带来或多或少的帮助。

html 篇

常用的meta属性设置

meta对于移动端的一些特殊属性，可根据需要自行设置

<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
<meta name="full-screen" content="yes">             //全屏显示
<meta name="browsermode" content="application">    
//UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，
//标准排版，以及强制图片显示。

<meta name="x5-orientation" content="portrait">     //QQ强制竖屏
<meta name="x5-fullscreen" content="true">          //QQ强制全屏
<meta name="x5-page-mode" content="app">            //QQ应用模式

电话号码识别

在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

  • 7 位数字，形如：1234567
  • 带括号及加号的数字，形如：(+86)123456789
  • 双连接线的数字，形如：00-00-00111
  • 11 位数字，形如：13800138000

关闭识别

<meta name="format-detection" content="telephone=no" />

开启识别

<a href="tel:123456">123456</a>

邮箱识别（Android）

安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别：

<meta content="email=no" name="format-detection" />

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

css 篇

0.5px细线

移动端 H5 项目越来越多，设计师对于 UI 的要求也越来越高，比如 1px 的边框。在高清屏下，移动端的 1px 会很粗。

那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。

下面介绍最常用的方法

/* 底边框 */
.b-border {
  position: relative;
}
.b-border:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 上边框 */
.t-border {
  position: relative;
}
.t-border:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 右边框 */
.r-border {
  position: relative;
}
.r-border:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #d9d9d9;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 左边框 */
.l-border {
  position: relative;
}
.l-border:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  background: #d9d9d9;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/* 四条边 */
.setBorderAll {
  position: relative;
  &:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
  }
}

屏蔽用户选择

禁止用户选择页面中的文字或者图片

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

清除输入框内阴影

在 iOS 上，输入框默认有内部阴影,以这样关闭：

div {
  -webkit-appearance: none;
}

如何禁止保存或拷贝图像

代码如下

img {
  -webkit-touch-callout: none;
}

输入框默认字体颜色

设置 input 里面 placeholder 字体的颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

用户设置字号放大或者缩小导致页面布局错误

设置字体禁止缩放

body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

android系统中元素被点击时产生边框

部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

iOS 滑动不流畅

ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

解决方案

  1. 在滚动容器上增加滚动 touch 方法
.wrapper {
  -webkit-overflow-scrolling: touch;
}
  1. 设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}

js 篇

移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。解决方案：

  • fastclick可以解决在手机上点击事件的300ms延迟
  • zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

  1. ontouchstart
  2. ontouchmove
  3. ontouchend
  4. onclick

audio 和 video 在 ios 和 andriod 中自动播放

这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。加入自动触发播放的代码

$('html').one('touchstart', function() {
  audio.play()
})

iOS 上拉边界下拉出现空白

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

解决方案

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

ios 日期转换 NAN 的问题

将日期字符串的格式符号替换成'/'

'yyyy-MM-dd'.replace(/-/g, '/')

软键盘问题

IOS 键盘弹起挡住原来的视图

  • 可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。
  • true，则元素将在其所在滚动区的可视区域中居中对齐。
  • false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。
window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})

onkeyUp 和 onKeydown 兼容性问题

IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件

IOS12 输入框难以点击获取焦点，弹不出软键盘

定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改

FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf('date') !== 0 &&
    targetElement.type !== 'time' &&
    targetElement.type !== 'month'
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}

IOS 键盘收起时页面没用回落，底部会留白

通过监听键盘回落时间滚动到原来的位置

window.addEventListener('focusout', function() {
  window.scrollTo(0, 0)
})

//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })

IOS 下 fixed 失效的原因

软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。

解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll

<body>
  <div class='warper'>
    <div class='main'></div>
  <div>
  <div class="fix-bottom"></div>
</body>
.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

本文转载自：https://segmentfault.com/a/1190000021767889

 更多web前端开发知识，请查阅 HTML中文网 ！！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

移动端H5开发常用小技巧（总结） 的相关文章

  • 深入CSS，让网页开发少点“坑”

    通常我们在学习CSS的时候 xff0c 感觉语法很容易掌握 xff0c 实际应用中却碰到各式各样难以填补的 坑 xff0c 为避免大家受到同样的困惑与不解 xff0c 本文详细讲解了CSS中优先级和Stacking Context等高级特性

  • Pixhawk参数调整

    Pixhawk copter固件的默认参数是为3DR QUAD COPTER设计的 如果你想获得一个最佳的飞行表现的话 你需要对一些参数做一些调整 调整的参数主要是Extended Tuning下面的Roll和Pitch的PID xff0c

  • 用于Vue.js应用程序的4个AJAX模式

    Vue没有提供实现AJAX的正式方法 xff0c 而且有许多不同的设计模式可以有效地使用 每种方法都有其优缺点 xff0c 应该根据需求进行判断 您甚至可以同时使用多个 在本文中 xff0c 我将向您展示在Vue应用程序中实现AJAX的四个

  • 预渲染vue.js应用程序（使用node或laravel）

    服务器端渲染现在非常流行 但它也并非没有缺点 预渲染是一种替代方法 xff0c 在某些情况下甚至可能更好 下面我们来看一下如何预渲染vue js应用程序 在本文中 xff0c 我们将探讨预渲染如何与vue js一起工作 xff0c 并看两个

  • CSS实现不定宽高垂直水平居中的几种方法

    垂直居中 xff0c 在 CSS 中是一个老生常谈的问题 xff0c 面试的时候也会时常被提及 所以 xff0c 今天我们就来聊聊 9 种不同的居中方法 有常见的 flex transform absolute 等等 也有 CSS3 的网格

  • JavaScript中的JSON和JSONP

    简单地使用json并不能支持跨域资源请求 xff0c 为了解决这个问题 xff0c 需要采用jsonp数据交互协议 众所周知 xff0c js文件的调用不受跨域与否的限制 xff0c 因此如果想通过纯web端跨域访问数据 xff0c 只能在

  • 了解JavaScript中的类

    javascript是一种基于原型的语言 xff0c javascript中的每个对象都有一个名为 原型 的隐藏内部属性 xff0c 可用于扩展对象属性和方法 直到最近 xff0c 勤奋的开发人员使用构造函数来模仿JavaScript中面向

  • 深入解析Javascript闭包及实现方法

    什么是闭包和闭包的几种写法和用法 1 什么是闭包 闭包 xff0c 官方对闭包的解释是 xff1a 一个拥有许多变量和绑定了这些变量的环境的表达式 xff08 通常是一个函数 xff09 xff0c 因而这些变量也是该表达式的一部分 闭包的

  • 理解JavaScript中的语法和代码结构

    所有编程语言都必须遵守特定的规则才能运行 确定编程语言的正确结构的这组规则称为语法 许多编程语言主要由具有语法变化的类似概念组成 在本教程中 xff0c 我们将介绍JavaScript语法和代码结构的许多规则和约定 功能性和可读性 在开始使

  • 深入CSS，让网页开发少点“坑”

    通常我们在学习CSS的时候 xff0c 感觉语法很容易掌握 xff0c 实际应用中却碰到各式各样难以填补的 坑 xff0c 为避免大家受到同样的困惑与不解 xff0c 本文详细讲解了CSS中优先级和Stacking Context等高级特性

  • 如何巧用 canvas（画布）为图片加水印？

    在前端中 xff0c 如何巧用 canvas xff08 画布 xff09 为图片加水印 xff1f 下面本篇文章就来给大家介绍一下使用 canvas 给图片添加水印的方法 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c

  • EKF（扩展卡尔曼滤波）参数理解

    EKF VELNE NOISE xff1a 速度在坐标轴 NE 方向上的噪声 通常是在 0 上下波动 设置方法 xff1a 将飞机上电静置若干分钟 xff08 时间尽量长一点 xff09 记录飞 行日志 xff0c 由 EKF3 的 IVN

  • 详解HTML文档声明（DOCTYPE）

    HTML文档通常以类型声明开始 xff0c 该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型 本文将详细介绍文档声明DOCTYPE 特点 文档声明必须是HTML文档的第一行 且顶格显示 xff0c 对大小写不敏感 因为任何放在DOC

  • CSS 不定宽高的垂直水平居中（9种方法）

    垂直居中 xff0c 在 CSS 中是一个老生常谈的问题 xff0c 面试的时候也会时常被提及 所以 xff0c 今天我们就来聊聊 9 种不同的居中方法 有常见的 flex transform absolute 等等 也有 CSS3 的网格

  • html5不常用标签应用场景

    作为一个前端开发 xff0c 在浏览别人家的页面时总是会习惯性的查看他们页面的源码 xff0c 发现大多数网站的页面 xff0c 包括我自己写的页面中用到的最多的布局元素无外乎就是div p span ul dl ol li dt dd s

  • HTML的16个全局属性介绍

    在HTML中 xff0c 属性能表达相当丰富的语义 xff0c 而且属性也会额外提供很多实用的功能 xff0c HTML共支持16个常见的全局属性 HTML原有属性 accesskey 作用 xff1a 浏览器用来创建激活或聚焦元素的快捷键

  • 聊聊JavaScript作用域

    几乎所有的语言都有作用域的概念 xff0c 简单的说 xff0c 作用域就是变量和函数的可访问范围 xff0c 即作用域控制在变量和函数的可见性和生命周期 变量作用域 是程序源代码中定义这个变量的区域 1 全局变量拥有全局作用域 xff0c

  • CSS布局方案大全【整理】

    我们在日常开发中经常遇到布局问题 xff0c 下面罗列几种常用的css布局方案话不多说 xff0c 上代码 xff01 居中布局 以下居中布局均以不定宽为前提 xff0c 定宽情况包含其中 1 水平居中 a inline block 43

  • 你必须知道的一些HTML优化技巧

    如何提升Web页面的性能 xff0c 很多开发人员从多个方面来下手如JavaScript 图像优化 服务器配置 xff0c 文件压缩或是调整CSS 很显然HTML 已经达到了一个瓶颈 xff0c 尽管它是开发Web 界面必备的核心语言 HT

  • 常见的CSS图形绘制合集

    展示40多个常见的纯CSS绘制图形 xff0c 效果实时 xff0c 含源代码 xff0c 想要什么效果直接复制粘贴就好了 就算项目用不到 xff0c 看看别人代码怎么写的也有助于提高CSS的基本功 以下这些造型简单的图形都是纯CSS外加一

随机推荐

  • 扩展Vue.js组件

    您的Vue应用程序中是否有共享类似选项的组件 xff0c 甚至模板标记 使用公共选项和标记创建基本组件 xff0c 然后扩展基本组件以创建子组件 xff0c 这是一个好主意 这样的体系结构将帮助您在代码中应用DRY原则 不要重复您自己 xf

  • Node.js日志记录指南

    当你开始用 JavaScript 进行开发时 xff0c 可能学到的第一件事就是如何用 console log 将内容记录到控制台 如果你去搜索如何调试 JavaScript xff0c 会发现数百篇博文和 StackOverflow 文章

  • 软件测试的测试方法及测试流程

    一 测试方法 xff1a 白盒测试 xff1a 把软件比作一个打开的盒子 xff0c 可以看到软件代码的实现 xff0c 针对代码的实现验证代码是否存在问题 单元测试阶段采用的测试方法 灰盒测试 xff1a 介于白盒和黑盒测试之间 灰盒测试

  • 18个用于创建漂亮图表的JavaScript库推荐

    几乎不可能想象没有图形和图表的任何仪表盘 它们快速有效地呈现复杂的统计数据 此外 xff0c 一个好的图表还可以增强网站的整体设计 在本文中 xff0c 我将向您展示一些用于图形和图表的最佳JavaScript库 这些库将帮助您为将来的项目

  • JavaScript基础--引用数据类型 (对象)

    本文主要讲述了JavaScript对象的属性和对象的引用 xff0c 以及对象的读取 赋值 删除和获取对象键名的操作 1 对象 对象就是一组 键值对 xff08 key value xff09 的集合 xff0c 是一种无序的复合数据集合

  • javascript面向对象设计

    javascript和java语言不一样 xff0c 它没有类这个说法 xff0c 更没有子类父类一说 xff0c 所以它所谓的继承机制 xff0c 也是和其他语言完全不同的 创建对象三种方式 1 最简单的方式 xff0c 创建一个obje

  • 关键CSS和Webpack：自动最小化渲染阻止CSS

    消除渲染阻止的JavaScript和CSS 这是我始终坚持使用的Google Page Speed Insights建议 Google建议您在页面加载准备就绪时将最初需要的CSS 内插 CSS内嵌并加载CSS的其余部分 当访问web页面时

  • 如何用SASS编写可重用的CSS

    Sass是一个CSS预处理程序 xff0c 它在前端工程师的工具箱中变得至关重要 Sass之所以流行 xff0c 是因为它修复了几个CSS缺陷 相关推荐 xff1a css在线手册 这也是Bootstrap 4运行的基础 这意味着为了理解如

  • JS 变量的作用域及闭包

    与闭包有关的概念 xff1a 变量的作用域和变量的生存周期 下面本篇文章就来给大家介绍一下JS中变量的作用域及闭包 xff0c 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 一 变量的作用域 1 变

  • 理解JavaScript中的变量、范围和提升

    变量是许多编程语言的基本组成部分 xff0c 也是新手需要学习的第一个也是最重要的概念 JavaScript中有许多不同的变量属性 xff0c 以及命名变量时必须遵循的一些规则 在JavaScript中 xff0c 有三个关键字用于声明变量

  • 用于VueJS和Webpack的代码分割模式

    拆分单个页面应用程序的代码是提高其初始加载速度的一个很好的方法 由于用户不必一次性下载所有代码 xff0c 他们将能够更快地看到页面并与页面进行交互 这将提高用户体验 xff0c 特别是在移动领域 xff0c 这是搜索引擎优化的一个胜利 x

  • javascript掌握正则表达式

    正则表达式 xff08 英语 xff1a Regular Expression xff0c 在代码中常简写为regex regexp或RE xff09 使用单个字符串来描述 匹配一系列符合某个句法规则的字符串搜索模式 我想正则表达式之所以难

  • 知道要测试什么——Vue组件单元测试

    关于单元测试Vue组件 xff0c 我看到的最常见的问题是 我到底应该测试什么 虽然测试过多或过少都是可能的 xff0c 但我的观察是 xff0c 开发人员通常会在测试过多时犯错误 毕竟 xff0c 没有人愿意成为一个组件测试不足导致应用程

  • 软件测试 | 测试开发书单 | 测试工程师必读经典好书，你读过几本？

    测试好书1080 480 46 3 KB 软件测试入行容易进阶难 在持续交付体系背景下 xff0c 要成为测试开发高手意味着非常系统综合的知识储备 广泛阅读经典好书是快速成长的必要方式 霍格沃兹测试学院重点推荐几本测试经典好书以及必读清单

  • 使用webpack提升vue.js应用程序的四种方法

    Webpack是开发Vue js单页面应用程序的必要工具 通过管理复杂的构建步骤 xff0c 它使您的开发工作流更加简单 xff0c 并且可以优化应用程序的大小和性能 在本文中 xff0c 我将解释Webpack提升Vue应用程序的四种方法

  • 了解Node.js中的流（Stream）

    Node js 中的流 xff08 Stream xff09 是出了名的难用甚至是难以理解 用 Dominic Tarr 的话来说 xff1a 流是 Node 中最好的 xff0c 也是最容易被误解的想法 即使是 Redux 的创建者和 R

  • 深入了解Vue.js的作用域插槽

    作用域槽是Vue js的一个有用特性 xff0c 它可以使组件更加通用和可重用 唯一的问题是它们很难理解 试着让你的头在父母和孩子的范围内交织 xff0c 就像解决一个棘手的数学方程 当你不能很容易地理解某件事时 xff0c 一个好的方法是

  • JavaScript常用基础算法

    一个算法只是一个把确定的数据结构的输入转化为一个确定的数据结构的输出的function 算法内在的逻辑决定了如何转换 基础算法 一 排序 1 冒泡排序 冒泡排序function bubbleSort arr for var i 61 1 l

  • HTML中的meta标签属性的使用

    之前学习前端中 xff0c 对meta标签的了解仅仅只是这一句 lt meta charset 61 34 UTF 8 34 gt 但是打开任意的网站 xff0c 其head标签内都有一列的meta标签 下面我们就来详细介绍一下meta标签

  • 移动端H5开发常用小技巧（总结）

    本篇文章给大家整理一些在移动端H5开发常见的问题给大家做下分享 xff0c 这里很多是在开发过程中遇到的大坑或者遭到过吐糟的问题 xff0c 希望能给大家带来或多或少的帮助 html 篇 常用的meta属性设置 meta对于移动端的一些特殊

热门标签