移动端开发基础 干货分享

移动端开发

我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站

app:application应用程序。手机软件:主要指安装在智能手机上的软件,完善原始系统的不足与个性化。

移动端开发是与PC端肯定是有很大不同的,所以我们需要学习如何在移动设备上开发完美适配的app

开发移动端应用我们需要学习的知识点可以分成如下几个:

  1. 移动端布局适配

  2. 移动端事件

  3. 移动端交互效果

  4. 移动端前端框架

  5. 移动端调试

移动端布局适配

从屏幕尺寸、屏幕类型等方面来看的话,移动设备和PC设备大有不同,所以从布局、适配等方面都需要我们考虑到

Viewport视口的作用

在很久以前,我们的设备还不是智能设备的时候,设备访问智能访问到网页的左上角(当时都是pc网站),查看全部内容需要通过滚动条

慢慢的我们发现,我们的一个页面放到移动端中访问的时候,没有滚动条了,但是内容都缩小了

这是因为我们有了一个叫做viewport的一个东西

网页不是直接放入浏览器中的,而是先放入到viewport中,然后viewport在等比缩放到浏览器的宽度,放入浏览器,viewport在缩放的过程中,网页内容也被缩小了

这样的话我们需要做一些处理,其实问题的根源在于viewport的宽度和浏览器宽度不一样,如果我们能将其设置为一样的话,不会出现这样的问题了

我们可以通过meta标签来设置viewport将其设置为浏览器的宽度,也就是设备的宽度,这样的话布局就会简单多了

viewport的宽度

当浏览器宽度小于980的时候,宽度就是980,当浏览器尺寸宽度大于980的时候,宽度和浏览器宽度一致

通过meta标签来设置viewport

标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

meta标签大全

meta viewport 的6个属性:

width
initial-scale 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
minimum-scale 设置页面的初始缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

移动端布局方式与设计图

现有的布局方式:

  1. 固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间

    内容区域的尺寸:980,1000,1100,1200

  2. 响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样

    一般会有三张设计图,PC,平板,手机

  3. 自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现

    设计图一般只有一张,640、750居多

移动端布局

移动的屏幕和PC的屏幕有一个很大的区别,移动端是视网膜高清屏(Retina)

retina屏幕有一个属性叫DPR(设备像素缩放比) = 物理像素/逻辑像素

例如,iphone 5s手机商宣传手机的尺寸是:640宽,这个值就是物理像素,而从开发者眼里我们所指的其实是320px(逻辑像素)

在dpr为2的手机中,我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染

如果不管dpr的话,其实我们布局依然可以,因为我们设置一个像素宽高的东西的话,在手机上看见的基本也就是这么大,至于手机设备用多少个物理像素去渲染,大小还是不会变化的

设计师出图都是2倍的,是因为,在页面中除了字体(矢量图)大部分都是位图,也就是如果一个像素宽高的盒子里准备放入图片,如果图片的尺寸也是一个像素宽高的话,因为其实在移动端渲染的时候是用四个像素来渲染,图片会失真,但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话,不就失真

布局单位

因为我们的移动设备有很多种,所以我们的布局不可能是固定布局,所以我们要使用自适应布局

我们在开发中可以选用很多自适应布局单位,这些单位必须满足一个条件

  1. %比布局

    优点:简单,无需设置,兼容性好
    缺点:基于父元素的属性来设置,如果父元素没有宽高,设置无效

  2. vwvh

    一个vw等于viewport宽度的百分之一,一个vh等于viewport高度的百分之一
    vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个

    优点:简单,无需设置
    缺点:兼容性不好

  3. rem

    一个rem等于根元素(html)的字体大小,兼容性很好

    优点:兼容好,使用简单
    缺点:需要设置

rem与适配

当我们想使用一个自适应单位的时候,发现%有缺陷,vwvh兼容性差,弹性盒所针对的是元素排列的问题,只适用于某种情况,所以我们就想,能给我一个没啥上面的缺陷的单位,想到了rem

rem的兼容性好一点,它也确实是一个布局单位,不受父子元素的影响,设置了rem之后,也不会对px、em等单位造成影响,它是一个理想的单位

rem也有一个致命的问题,就是它不是一个自适应的单位,不会跟着设备尺寸不同而不同,但是没有关系,我们有万能的js,可以去动态的设置它

方法1:

我们可以将1rem设置成屏幕的某一个比例,比如将1rem设置成屏幕的十分之一

假设我们的设计图是640宽的,我们拿到之后量了一下a的宽度为480px,得到比例a所占屏幕3/4,根据rem与屏幕的关系,最后设置成7.5rem

就是说在设置元素的宽度是时候,会根据设定好的比例关系去进行换算

方法2:

如果设计图是640的图,这个时候我们知道它是照着i5来的,我们现在假设世界上所有的手机都是320的,也就是每一个人用的都是i5,在这个理想的情况下,因为手机都一样,尺寸都一样,和pc端的固定布局也就一样了

假设有一个在640的图上我们量得的宽度是320,因为是二倍图,所以我们知道,它的实际宽度是160px,这样的话,我们直接给这个设置设置width:160px就可以了,这个时候,我们玩个花子,不要单纯的使用px来设置,用rem来设置,例如,我可以将rem设置为100px,这样的,刚才的盒子设置为width:1.6rem,算法就是 量的宽度/(dpr*100) = 要设置的rem值

这样我们就可以开心的开发,量一个尺寸,除个2,再小数点推两位,设置就性了,但是我们也知道,手机的尺寸并不可能都是320,这样的话,没有关系,我们可以根据一个比例来算rem到底设置为多少

在手机宽度为320的时候,我们设置的1rem=100px,所以有一个比例 b = 100/320

那么在W宽度的手机上,1rem应该是多少呢?设为x 那么x/w = b

得到x = w/3.2

那么就不要写死html的fontsize为100了。而是用js去设置:

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px'

这样,我们就可以得到一个自适应的rem

方法3:

设计图如果是640的,我们知道设计的依据屏幕依然是320,假设所有的手机都是320的

有一个div量得320,我们知道它的实际宽度是160,所以我们在css里直接设置160px。布局就很简单了,因为量多少,除以2就可以直接设置了

但是手机不能只有这一个尺寸,不过没关系,我们可以想办法,我们知道,页面是放在viewport里的,页面的宽度就是viewport的宽度,我们在前面的方法会会将viewport通过meta标签设置为手机屏幕的宽度,但是现在我们就将viewport的宽度强行设置为320px,那么我们页面就会认为它的屏幕宽度就是320px,如果是在屏幕宽度不等于320的手机里,viewport也会进行缩放,缩放到手机屏幕大小,但是这个时候,页面依然认为手机屏幕是320的,也就是说,布局使用固定布局,自适应由viewport去做了,让它将咱们320的页面缩放到不同尺寸的移动设计,达到表现一致

饿了么的做法:认为世界的手机都是二倍宽的,然后再调整viewport

常见的需要注意的问题
  1. 1px边框

    在移动端中,如果给元素设置一个像素的边框的话,那么在手机上看起来是会比一个像素粗的。

    解决方法:使用伪类元素模拟边框,使用transform缩放

    .a::after{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #333;
        position: absolute;
        left: 0;bottom: 0;
        transform: scaleY(0.5)
    }
  1. 响应式图片

    在移动端中,图片的处理应该是很谨慎的,假设有一张图片本身的尺寸是X宽,设置和包裹它的div一样宽,如果是div宽度小于图片宽度没有问题,但是如果div宽度大于图片的宽度,图片被拉伸失真

    解决方法:让图片最大只能是自己的宽度

    img{
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
    
移动端webkit

移动端的浏览器的内核百分之99都是webkit内核


移动端事件

移动端中的事件和PC的事件有一些是不同的,例如,mouse部分事件在移动端里没有了

取而代之的是touch事件:

touchstart/touchmove/touchend/touchcancel

添加事件的时候可以用ontouchstart,但是有的时候很可能失效,建议使用addEventListener的方式

touchcancel比较少见,在系统取消触摸的时候触发

touch事件对象里面的属性和mouse的略有不同,例如在mouse事件里可以直接从事件对象里取出pageX,clientX,screenX

touch事件对象里有touches,changedTouches,targetTouches三个属性,上面保存着关键的位置信息

它们里面保存的是触发事件的手指的信息,但是要注意,虽然三个里面保存的信息看似都一样,但是在touchend事件里,只能使用changedTouches

click的300ms延迟问题

在移动端中,click事件是生效的,但是它有一个问题,点击之后会有300ms的延迟响应

原因:safari是最早做出这个机制的,因为在移动端里,浏览器需要等待一段事件来判断此次用户操作是单击还是双击,所以就有click300ms的延迟机制,Android也很快就有了

  1. 不用click,用自定义事件tap

    tap是需要自定义的:如果用户执行了touchstart在很短的时间又触发了touchend,且两次的距离很小,而且不能触发touchmove

    使用zepto类库的时候,里面自带tap事件,,但是需要在zepto.js后面加上一段js

    zepto官网;Touch模块

    hammar.js也是一个手势事件库文档

  2. 引入fastclick库来解决

点透bug的产生

点透bug有一个特定的产生情况:

当上层元素是tap事件,且tap后消失,下层元素是click事件。这个时候,tap上层元素的时候就会触发下层元素的click事件

解决方式:

  1. 上下层都是tap事件,缺点:a标签等元素本身就是自带的click事件,更改为tap比较困难
  2. 缓动动画,让上层元素消失的时候不要瞬间消失,而是以动画的形式消失,事件超过300ms就可以了
  3. 使用中间层,添加一个透明的中间元素,给它添加click事件并消失,这个时候接收点透的是透明的中间层
  4. 使用fastclick

移动端测试

  1. 使用chrome浏览器有移动设备模拟功能,在这里可以做一些模拟测试,但是要注意的是,毕竟不是真机,会有一些测试不到的问题

  2. 手机连接上电脑的无线,总之使其在同一个网络里,然后就可以通过ip访问

需要测试的浏览器:

chrome,firefox,UC,百度,QQ,微信,Android,safari

移动端交互

动画效果全部使用css3

JQ生成二维码

可以使用jquery.qrcode.js插件,可以快速的生成基于canvas绘制的二维码

兼容查阅网站

can i use,在这里可以查看很多属性、api的兼容性

375/52.08 = X/100 x = 37500/52.08

学习前端的同学们

欢迎加入前端学习交流QQ群:461593224

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容