那些移动端web踩过的坑
原文链接:https://geniuspeng.github.io/2017/08/24/mobile-issues/
扔了N久,还是捡回来了。好好弄一下吧。刚工作的时候挺忙的,后来不那么忙了,但是变懒了。
这一年大多数时间都在在做移动端的东东,做了之后才发现,同样是web前端,移动端的坑真的是深不可测,各种各样的,只有想不到,没有遇不到。在这里把最近踩过的坑整理一下。
No.1 大字体问题
首先,要解决的关键问题是如何为设备选择可视视口尺寸,采用理想视口尺寸作为可视视口尺寸,代码也十分简单,只需要将缩放比定为 1
1 |
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"> |
之所以把它放在第一个也是因为这个印象最深,记得第一次做移动端html5页面的时候,啥都不懂,还在用px作为像素单位,当然这个px是相对的(关于px可参考css 长度单位知多少),然而在移动端使用px是相当不靠谱的,随随便便换一个大小不一样的设备,可能就会出现样式错乱。。。当然后来使用了rem,众所周知1rem=1 htmlFontSize,所以这里只要我们把html的字体大小事先定好,就可以基本上解决字体的适配问题。那么怎么选择这个htmlFontSize呢?
一般UI的设计稿都是3倍大小,这里已1080为例子(我拿到的一般都是1080的),实际上就是360px宽度的device,比如我自己习惯上想让1rem=100px(这里的px是实际像素,相当于设计稿的300像素),那么问题关键就在于,htmlFontSize的多少px正好对应设计稿的300px,那么根元素html的fontsize(设为fz)与设备实际宽度(设为dw)的对应关系应为:
1 |
dw/1080 = fz/300 |
这样,你的设备宽度用rem表示其实就是3.6rem,即使不是360px,也可以按比例来缩放,而设计稿中的每300px对应为1rem,使用rem布局,字体大小就可以随着设备宽度来自己调整。
1 |
function setRootFontSize() { |
这段代码基本上可以满足字体在移动端的自适应要求,可是如果用户主动把设备字体调大,也就是1px对应的大小变大,字体虽然px数不变,显示还是会变大,而有些比较复杂的h5页面字体稍微有些变化就会有问题,所以有时候还需要限定页面的字体大小不随设备字体的调整而影响,这时需要用到getComputedStyle这个方法,getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值(可参考获取元素CSS值之getComputedStyle方法熟悉)。通过对比算出来的fz和实际的realfz,对其进行相应缩放即可。
1 |
function setRootFontSize() { |
No.2 滚动时最底层(或顶层)回弹问题
这个坑应该做过移动端的都踩过(只是大多数情况根本不算坑,然而我要做的东西基本上都要禁掉这玩意),试过很多方法,都不是很理想,最终的解决方案就是禁用父级元素的滚动,手动模拟滚动条:
1 |
var scroll = function(container, childSelector, style) { |
原理其实还是很简单,先计算一下滚动条的高度,然后按照比例去设置transform(还有很多可优化扩展的地方),第一个参数是父元素的zepto(或jquery)选择器对象,第二个参数是需要滚动的子元素包裹层,第三个是滚动条的样式(可选,有默认),需要把parent元素设置为overflow:hidden,child元素的height设置为auto。
No.3 Modal弹出层滚动带动底层一起滚动
这个也是只有移动端才有的坑,类似与一种穿透吧,手指在弹出层滑动的同时,如果底层有滚动条的话也会跟着一起滑动,解决方案:
css添加:
1 |
/*禁止modal底层滚动*/ |
js添加
1 |
var SCROLL_TOP = 0; |
No.4 tap事件穿透
这算是zepto的一个bug了,具体这个bug的源头还得追到zepto对于tap事件的模拟(参考也来说说touch事件与点击穿透问题),我后来用的解决方法也是参考这里来的,就是使用pointer-events这个属性,这里就不多介绍了,这里的第三种方法,使用fastclick库模拟click也可以完美解决移动端的点穿问题。
1 |
$('#closePopup').on('tap', function(e){ |
参考链接
- 获取元素CSS值之getComputedStyle方法熟悉
- css 长度单位知多少
- 网易和淘宝移动WEB适配方案再分析
- 也来说说touch事件与点击穿透问题
- 前端涉及的各种像素概念以及 viewport 汇总
文末福利:
福利一:前端,Java,产品经理,微信小程序,Python等10G资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
福利二:微信小程序入门与实战全套详细视频教程。
【领取方法】
关注 【编程微刊】微信公众号:
回复【小程序demo】一键领取130个微信小程序源码demo资源。
回复【领取资源】一键领取前端,Java,产品经理,微信小程序,Python等资源合集10G资源大放送。
那些移动端web踩过的坑的更多相关文章
- 那些移动端web踩过的坑2
原文链接:https://geniuspeng.github.io/2018/04/26/mobile-issues2/ 坑是无穷无尽的,嗯-长江后坑推前坑~~ 关于音频自动播放 H5的audio标签 ...
- 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)
前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...
- 移动端web开发的那些坑
1.为非a列表项添加触感样式 通过js注册touchstart和touchend事件,添加触感class的方式, 有个坑,低版本的Android浏览器,经常触发不到touchend,需要再额外注册一个 ...
- web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
- 第八篇:web之前端踩的一些坑
前端踩的一些坑 前端踩的一些坑 本节内容 事件代理 清除标签的所有事件 bootstrap的模态框自定义方法 ajax在django里面实现post提交 ajax提交数据嵌套 1.事件代理 之前写 ...
- 移动端h5页面的那些坑
最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白 解决办法:在全局样 ...
- apicloud地图、即时通讯、人脸识别登录、以及平时踩过得坑
apicloud技术浅谈 导语 apicloud 的学习也有一段时间了,这是我个人的一些经验,和踩过的坑,希望对大家能有一些帮助. apicloud的知识准备 apicloud 是一个用原生的思想搭建 ...
- H5 缓存机制浅析 移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
- 简述移动端IM开发的那些坑:架构设计、通信协议和客户端
1.前言 有过移动端开发经历的开发者都深有体会:移动端IM的开发,与传统PC端IM有很大的不同,尤其无线网络的不可靠性.移动端硬件设备资源的有限性等问题,导致一个完整的移动端IM架构设计和实现都充满着 ...
随机推荐
- UDP深入骨髓【转】
从UDP的”连接性”说起–告知你不为人知的UDP 原文地址:http://bbs.utest.qq.com/?p=631 很早就计划写篇关于UDP的文章,尽管UDP协议远没TCP协议那么庞大.复杂,但 ...
- java初始化过程中成员变量
package day01; class Base{ int j; //1.j=0 Base(){ add(1); //2.调用子类add()方法 System.out.println(j); //4 ...
- C# 中编写函数式代码
http://www.dotnetcurry.com/csharp/1384/functional-programming-fsharp-for-csharp-developers 写给 C# 开发人 ...
- Java 大数
How Many Fibs? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- WEB安全实战(二)带你认识 XSS 攻击
前言 上一篇文章写了关于 WEB 安全方面的实战,主要是解决 SQL 盲注的安全漏洞.这篇文章本来是要写一篇关于怎样防治 XSS 攻击的,可是想来想去,还是决定先从理论上认识一下 XSS 吧.下一篇文 ...
- 字串乱序 PHP&JS
<?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...
- 上拉刷新,下拉加载(JQuery)
<script type="text/javascript"> $(document).ready(function() { $(w ...
- nodejs连接mysql突然中断问题解决方案
db/index.js数据库配置文件 一.在数据库连接失败的情况下,回调函数,再次发起连接,直到连接成功为止. handleDisconnect(){ this.connection.connect( ...
- 【Educational Codeforces Round 33 D】Credit Card
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次遇到0的时候,看看当前累计的delta是多少. 如果大于0,则temp = d-delta; 小于0,取temp2 = min( ...
- 【iOS开发系列】颜色渐变
记录: //Transparent Gradient Layer - (void) insertTransparentGradient { UIColor *colorOne = [UIColor c ...