前言
年后第一天到公司上班,整理一些在移动端H5开发常见的问题给大家做下分享,这里很多是自己在开发过程中遇到的大坑或者遭到过吐糟的问题,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下。
下面是最近一个月整理的JS基础总结,可供大家温故而知新。
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 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:
关闭识别
- <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。
解决方案
- .wrapper {
- -webkit-overflow-scrolling: touch;
- }
- body {
- overflow-y: hidden;
- }
- .wrapper {
- overflow-y: auto;
- }
js 篇
移动端click屏幕产生200-300 ms的延迟响应
移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。解决方案:
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块,tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
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 键盘弹起挡住原来的视图
- 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%;
- }
随着移动设备的飞速发展, 无线网络联盟也宣布了 20 年来的最重大的一次升级,它...
如今,人工智能(AI)在捕获、处理和分析数据方面发挥着关键作用,其速度比以往任...
ABI Research的一份新报告显示,LoRa将在未来五年内引领非蜂窝式低功耗广域网(LP...
近日,南极首次发现一只金黄色企鹅,这只被戏称是充了黄钻的企鹅摇身一变成为网...
《机械公敌》是菜菜小时候特别喜欢的一部电影,放在现在来看也是毫不过时。小时...
研究技术为人工智能和机器学习应用在现代商业环境提供了一个很好的途径。各行业...
老顽童周伯通被黄药师困在桃花岛上十几年,闲极无聊自己左手打右手,创造出左右...
12月4日下午,鲲鹏高校行系列活动首站来到了上海交通大学。鲲鹏高校行交大站由上...
即使受到疫情强烈冲击,在人工智能赛道耕耘22年后,科大讯飞在智能语音、图像识...
12月10日,中国信通院发布2020年11月国内手机市场运行分析报告,报告显示,国内...