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

凯特林 等级 369 1 1

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%;  
}  
收藏
评论区

相关推荐

iOS 11更新后以及iPhone X推出后工程中遇到的问题及适配
1.UITableView滑动时右侧的滑动条忽长忽短的乱跳以及MJRefresh上拉刷新死循环 这是因为tableView在iOS11默认使用SelfSizing,tableView的estimatedRowHeight、estimatedSectionHeaderHeight、estimatedSectionFooterHeight三个高度估算属性由默
js动态生成二维码
需求:项目需要根据链接实时生成二维码,当检测终端是PC时,将当前项目链接生成二维码供用户手机端使用 判断终端是否为mobile function isMobile () { let flag navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile
本博客精品资源汇总:(持续更新)
@toc 引言 欢迎大家来到公众号:iOS逆向的《精品资源汇总》目录 本文列出最受欢迎的资源,以便供大家快速查找自己所需的资料 文中的蓝字都是超级链接,点击进入即可 I、iOS自定义视图相关热门资源 iOS 自定义视图:《用户协议及隐私政策》弹框(包含超链接属性)【demo源码支持中英文切换】(https://downloa
移动端H5开发常用技巧总结
html 篇 常用的meta属性设置 meta对于移动端的一些特殊属性,可根据需要自行设置 <meta name"screenorientation" content"portrait" //Android 禁止屏幕旋转 <meta name"fullscreen" content"yes"             //全屏显示
iOS/Android SQLite全文检索——FTS (full text search)
前言 我们的APP部分功能为了满足用户离线使用搜索的场景,使用了内置SQLite数据库的方式,随着内容的日益丰富,数据库记录快速增多,导致搜索速度明显变慢,为了提升搜索速度,给我们的数据做了全文检索的支持,在3W的数据下,搜索速度由原来的数秒提升至几十到几百毫秒(设备不同,搜索效率存在差别)。 一、基本概念 1. 概述
【Flutter 实战】安装Flutter
1.3 搭建Flutter开发环境工欲善其事必先利其器,本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装,然后再介绍一下配IDE和模拟器的使用。 1.3.1 安装Flutter由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Fl
由Vant Field组件得到解决IOS输入框 键盘上推问题
前言 前几天公司让写一个客户数据入录页面(就是个带了logo的表单页面),就直接选择用原生的直接上,原以为也就个把小时的事情(确实个把小时就写完了),但是测试发现ios(没有测试多个,至少qq浏览器会)会输入的时候导致页面上推严重影响用户体验。 可直接转第三部分 由开源库找到方案 Vant Field组件通过看源码发现Field在bl
Flutter - 深入理解Flutter引擎启动
基于Flutter 1.5,从源码视角来深入剖析flutter引擎的启动流程,相关源码目录见文末附录一、Flutter引擎启动工作 1.1 Flutter启动概览Flutter作为一款跨平台的框架,可以运行在Android、iOS等平台,Android为例讲解如何从Android应用启动流程中衔接到Flutter框架,
uni-app开发 常见异常和解决办法
前言uniapp 是一个基于 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。在开发过程中可能会遇到一些异常,这些异常及其解决办法总结如下。 1.调用微信开发者工具报错IDE service port dis
uni-app开发 经验和技巧总结
## 前言uni-app 是一个基于 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等**多个平台**。在开发过程中可能会用到一些经验和技巧,可以加速开发,归纳如下。## 1.自定义组件模板在开发时,很多情况下需要自定义组件,在自
Flutter 跨平台演进及架构开篇
版权声明: 本站所有博文内容均为原创,转载请务必注明作者与原文链接,且不得篡改原文内容。一、移动跨平台技术演进 1\. 引言移动互联网发展十余年,伴随着 Android、iOS 等智能手机的不断普及,移动端已逐步取代 PC 端,成为兵家必争之地。正所谓“得移动端者得天下”,移动端已成为互联网领域最大的流量分发入口,一
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
IOS 某电商App签名算法解析(二) Frida RPC调用
一、目标Android下用frida来做rpc调用计算签名,我们已经玩的很熟练了。今天介绍在IOS下的玩法。要点如下: 参数类型确认 NSDictionary NSArray等ObjectC对象的构造和复制 ObjectC 类方法和对象方法的调用 附送福利, ObjectC的nil 参数如何构造 二、步骤 参考Android下的玩法参照 [某段子App协议分
IOS Theos Tweak 之 HelloWorld
一、目标Theos是什么?是一套跨平台的开发工具套件,不仅可以开发Ios,Mac、Windows和Linux也可以的哦,开源免费。Tweak是什么?可以理解成动态链接库,有搞过Windows下dll注入的同学应该可以秒懂了。Android的同学可以把它理解成IOS下的Xposed。HelloWorld是什么?是萌新程序员的信仰,在一个平台写下HelloWor
IOS 联真机签名解决方案
一、目标我们之前介绍过 和 。 那么他们搭配起来能解决什么问题呢?在Android联真机签名方案中,我们提到过Frida rpc方案的缺点: frida不是很稳定,偶尔会崩溃出退 frida启动需要连PC (不过这个缺点已经被 给解决了)那么在Ios下有没有类似Xposed的东东?是的,就是 Tweak。 二、步骤 GCDWebServerGCDWebS