移动前端系列–移动端页面坑与排坑技巧

## video标签脱离文档流

问题描述：标签的父元素(祖辈元素)设置transform样式后，标签会脱离文档流

测试环境：部分android机型

解决办法：不使用transform属性。translate用top、margin等属性替代

## ::after在手机中使用animation无效

问题描述：::after在手机不支持animation

解决办法：不用伪元素改为普通元素

## 页面高度渲染错误

问题描述：页面100%高度包含地址栏高度，当地址栏存在时，会部分内容被隐藏

环境与频率：经常性出现;各移动浏览器

解决办法：重置高度：document.documentElement.style.height = window.innerHeight + ‘px‘

## 叠加区高亮

问题描述：使用click也会出现绑定点击区域闪一下的情况

环境与频率：部分android机型

解决办法：给该元素一个样式 -webkit-tap-highlight-color:rgba(0,0,0,0);

## 事件无法被触发

问题描述：focus、touch、click等事件均无效

环境与频率：android微信 部分机型

解决办法：该元素其CSS属性里增加 -webkit-transform: translate3d(0,0,0)

## :active 效果不兼容

问题描述：CSS active伪类无效

环境与频率：android 4.2以下

解决办法：该元素的touch系列的事件绑定一个空匿名方法

   element.addEventListener(‘touchstart‘,function(){},false);

## 浏览器崩溃

问题描述：解绑函数写在了事件处理中导致微信崩溃

环境与频率：小米微信

解决办法：解绑事件不要写在事件处理中

## 预加载与自动播放无效

问题描述：audio的preload、autoplay 无法直接起效 环境与频率：受操作系统、浏览器（webview）、版本等影响

解决办法：捕捉一次用户输入后，让音频加载实现预加载

   //play and pause it once
   document.addEventListener(‘touchstart‘, function () {
   document.getElementsByTagName(‘audio‘)[0].play();
   document.getElementsByTagName(‘audio‘)[0].pause();
   });

## 无法同时播放多音频

问题描述：播放后一音频会打断前一音频，而不会同步播

环境与频率：android

解决办法：合理降权与选择不同的音频，不同音频营造尽量一致的氛围。

## 不支持局部滚动

问题描述：除body(html)元素外 overflow:scroll 无效

环境与频率：android 2.X

解决办法：1、巧用布局 利用body(html)全局滚动 2、iscroll、自写js控制translate、scrollTop模拟

## input:password 密码输入框出现悬浮怪异输入框

问题描述：怪异悬浮的表单

环境与频率：部分android机型

解决办法：使用input:text类型而非password类型，并设置其设置 -webkit-text-security: disc; 隐藏输入密码从而解决

## video标签脱离文档流

问题描述：标签的父元素(祖辈元素)设置transform样式后，标签会脱离文档流

测试环境：部分android机型

解决办法：不使用transform属性。translate用top、margin等属性替代

## 初始化页面时获取不到宽高

问题描述：内嵌浏览器的ready跟我们jq或者zoto提供的方法不一样，不通用

测试环境：内嵌浏览器

解决办法：

var inter=setInterval(function(){
    if ($win.width()){
        //你的代码
        clearInterval(inter);
    }
},10);

## 不同单位在手机端不能用

问题描述：如100%在手机端展现不一致

测试环境：/

解决办法：100% -> 100px

## webkit与标准颜色渐变方向相差90度

问题描述：webkit与标准颜色渐变方向相差90度 background:-webkit-linear-gradient(0deg,#3d86c8,rgba(61,134,200,0) 25%,rgba(61,134,200,0) 75%,#3d86c8);background:linear-gradient(90deg,#3d86c8,rgba(61,134,200,0) 25%,rgba(61,134,200,0) 75%, #3d86c8);

测试环境：/

## flexbox子元素settimeout不渲染

问题描述：flexbox子元素settimeout不渲染

测试环境：/

解决办法：/

## 子元素水平浮动 height:100% 计算有误

问题描述：子元素水平浮动 height:100% 计算有误

测试环境：QQ浏览器

解决办法：/

## canvas toDataURL导出数据失败

问题描述：canvas toDataURL导出数据失败

测试环境：QQ浏览器

解决办法：/

## touchmove阻止冒泡，底层元素touchend也不会执行

问题描述：touchmove阻止冒泡，底层元素touchend也不会执行

测试环境：/

解决办法：/

## QQ浏览器引入js文件缓存

问题描述： QQ浏览器引入js文件缓存

测试环境：android QQ浏览器

解决办法：/

1、外观

A、页面高度渲染错误

在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：

document.documentElement.style.height = window.innerHeight + ‘px‘;

B、叠加区高亮

在部分Android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：

-webkit-tap-highlight-color:rgba(0,0,0,0);

2、行为

A、事件无法被触发

在部分Android机型的微信环境中会出现事件无法触发、表单无法输入的情况，我们针对需要输入或者触发事件的元素设置样式：-webkit-transform: translate3d(0,0,0) ，不过新版本的微信已经直接修复了该问题。

B、:active 效果不兼容

在android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:

var element=document.getElementsById(”btnShare”); element.addEventListener(‘touchstart’,function(){},false);

3、应用

A、浏览器崩溃

var act = function(){ window.removeEventListener(‘devicemotion‘,act); }; window.addEventListener(‘devicemotion‘,act,false);

解绑函数写在了事件处理中导致小米手机中的微信崩溃，那么我们不要将解绑时间写在事件处理中即可。

B、预加载、自动播放无效

如上表所示，经过简单的测试发现预加载、自动播放的有效性受操作系统、浏览器（webview）、版本等的影响，苹果官方规定必须由用户手动触发才会载入音频，那么我们捕捉一次用户输入后，让音频加载实现预加载:

//play and pause it once  document.addEventListener(‘touchstart‘, function () {  document.getElementsByTagName(‘audio‘)[0].play();  document.getElementsByTagName(‘audio‘)[0].pause();  });

C、无法同时播放多音频

在android设备中,播放后一音频会打断前一音频，而不会同步播放,这个是目前系统资深决定的，我们只有采取优雅降权的方法让android选择不一样风格的音频前后切换播放而不是同时播放，达到与预期接近的音频效果。

D、不支持局部滚动

在android 4.0版本以下在body(html)元素之外的元素 overflow:scroll 样式设置滚动条无效，这里有两种解决方案:

1、巧用布局直接设置样式滚动条在body(html)上，其他元素“错觉滚动”。

2、利用iscroll、自写js控制translate、scrollTop模拟

4、系统/硬件

A、怪异悬浮的表单

在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security: disc; 隐藏输入密码从而解决。

B、错误出现滚动条

在游戏内嵌页中出现了不应该出现的滚动条，而且内容并没有超出内容区宽度，经过测试overflow:hidden 无效，通过一系列尝试使用古老的 <body scroll=”no”> 写法解决，多尝试一下不同的写法和属性会有不一样的惊喜哦！

C、链接打开系统浏览器

在游戏内webview的部分android机型中可能会出现点击链接调用系统浏览器的情况，这是一个非常不好的体验。那么我们尝试给这个元素添加 target=”_blank”‘ 属性有可能解决，如果还不能解决那么需要修改IOS或android原生系统函数了。

D、Flex box 不兼容

在游戏内嵌webview中碰到Flex box布局不兼容的情况，图中所示下面部分的导航错位了，虽然之前有仔细查看过Flex box的兼容性，但是在游戏内嵌页中无法确定其调用的系统浏览器版本及兼容，所以导致错误，所以我们写完整历史版本呢的3种Flex box 解决。那么我们思考在写页面过程中还是本着保守稳定的方式书写样式可以减少不不要的麻烦。

    面对这么多坑，还有各种各样已经的和未知的坑，时间上也不可能一一讲完，更不可能都已经有解决方案,我们需要学会如何去解决坑:

解决坑首先自己需要有个强有力的执行力，通过不断去尝试来探索未知的问题，那么一般我们会通过哪些方式哪些步骤和技巧来尝试呢？

1、首先我们需要定位问题，我们可以使用下列方法：

A、DOM隔离定位法

不断由大范围到小范围隔离出DOM，从而找出、触发问题的DOM元素

B、样式、JS剔除法

不断剔除一些JS、CSS观察调试检查是否是由部分JS、CSS属性引起问题

C、多运行环境测试法

在多环境中测试，排查是否是由于特定环境引起

D、PC与手机联合调试法

联合PC与手机进行定位，如：通过Mac远程调试iPhone/iPad

2、我们解决问题可以尝试如下的方式：

* 尝试、转思维、绕解决

* 优雅降权、区分处理、沟通

* 搜索与提问……

和以下的思维：

* 替代

* 绕道

* 分割……

3、在解决问题的过程中我们需要学会利用搜索和沟通资源解决问题：

A、google

B、stackoverflow

C、同事、朋友、QQ群、论坛等

Google和stackoverflow让你更容易更精确的快速搜索出问题相关的资料，同时、朋友QQ群、论坛等让你可以直接的跟人沟通出别人所遇到的问题及解决方案。

    在发现、解决问题后，更重要的是要学会如何总结问题：

A、总结记录问题产生条件、解决方法和解决过程

B、尽可能分析原理、产生的条件，避免重蹈覆辙

C、分享给更多的人

无穷无尽的坑，走的人多了，总结分享的多了，坑也就越来越平了

我们在总结记录问题的同时，整理了一个移动端小贴士，记录问题与一些坑，虽然目前还不完善但是希望能分享给更多的人也希望更多的人能参与完善。

链接: https://github.com/tgideas/mtips

时间： 2024-10-11 10:41:18

移动前端系列–移动端页面坑与排坑技巧的相关文章

移动前端系列——移动端页面坑与排坑技巧

移动前端系列——移动端页面坑与排坑技巧 In 网页重构 on 2014-12-08 20:21:19 by lyushine 对于前端开发者来说移动端存在更多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题(我们俗称BUG或坑),那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧. 移动端页面在不同设备.不同操作系统 .不同运行环境下都可能造成各种各样的没有碰到过的的坑,相比曾经的IE6坑多了.下面先介绍一下4类具体常见的坑: 1.外观 A.页面高度渲染错误 在各移动端浏览器中经

前端系列——jquery前端国际化解决方案“填坑日记”

前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl 但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初

Ajax 请求时后台跳转 前端页面不更新踩坑记录

踩坑环境:前端:Ajax post请求,json类型数据:后端 C#+MVC,前后端正常通信,但是当后台验证权限不通过时会RedirectToAction跳转到登录页,结果现象是后台正常执行登录页的渲染,渲染完成之后前端ajax进入error,页面不刷新. 经检查页面不跳转是因为后台渲染页面后以字符串形式返回,被ajax接收,有因为前端设置json格式所以进入error,看来需要后台返回状态和url,前端js来进行页面跳转,但总感觉这样不太方便,继续研究一下能否实现后台跳转,有方案再来更新内容.

移动前端系列——移动页面性能优化.

随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状, 移动页面布局越来越复杂,效果越来越炫,直接导致了文件越来越大,下载和运行速度越来越低,而速度低会造成不良影响,据统计: 71%的用户期望移动页面跟pc页面一样快,74%的用户能容忍的响应时间为5秒,所以我们必须保证移动端页面有足够的速度. 移动页面的速度跟三个因素有关,分别是:移动网络带宽速度,设备性能(CPU,GPU,浏览器),页面本身. 目前主流

[移动端]移动端上遇到的各种坑与相对解决方案

mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 1.问题:手机端 click 事件会有大约 300ms 的延迟 原因:手机端事件 touchstart –> touchmove –> touchend or touchcancel –> click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟 解决方法:使用touch事件来代替click事件,如

[移动端]移动端上遇到的各种坑与相对解决方式

mobileHack 这里收集了很多移动端上遇到的各种坑与相对解决方式 1.问题:手机端 click 事件会有大约 300ms 的延迟 原因:手机端事件 touchstart –> touchmove –> touchend or touchcancel –> click.由于在touch事件触发之后,浏览器要推断用户是否会做出双击屏幕的操作,所以会等待300ms来推断,再做出是否触发click事件的处理.所以就会有300ms的延迟 解决方法:使用touch事件来取代click事件.如

再聊移动端页面的适配

再聊移动端页面的适配 https://www.w3cplus.com/css/vw-for-layout.html  原文网址 Flexible承载的使命 Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值: <!-- dpr = 1--> <meta name=

移动端页面布局的那些事儿

移动端页面布局的那些事儿 http://www.xiaoxiangzi.com/Programme/CSS/4298.html 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport.如今的浏览器,都会给自己的本身提供一个viewport的默认值,可能是980px,或者是其

[后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs

一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用程序.在开始使用AngularJs开发SPA之前,我觉得有必要详细介绍下AngularJs所涉及的知识点.所有也就有了这篇文章. 二.AngularJs介绍 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并可扩展的服务,包括数据绑定.DOM操作.MVC和依赖注