大家好,又见面了,我是你们的朋友全栈君。
HTML5:移动端开发入门
一、前言
-
常见的移动端开发分为移动版网站和响应式设计。
-
移动端开发可以让技术人员专注于移动端的页面优化,而无需在意桌面版的兼容,但页面一旦改动内容,维护成本就翻倍了;
-
响应式设计让开发人员只需维护一份项目,节省开发和维护成本,不过缺点是需要做好移动端和桌面端的兼容,也十分考验页面设计。
-
两种开发方式孰强孰弱,暂无定论,本博客主要探讨一下移动端开发的技巧。
二、移动端开发技巧
1. Viewport设置
-
传统桌面端网站的显示窗口往往都是在1024X768的分辨率以上开发的,远远大于移动端的窗口大小。为了使桌面端网页能在移动端正常显示,移动端浏览器推出了一种名为“viewport”的虚拟窗口,在不同的设备中,这一窗口的大小都不同。(windows为1024px,ios为980px)
-
为了使移动设备能完整显示页面,viewport往往被浏览器加上缩放以自适应宽度,让980px的网页显示在320px的移动设备上。这就是为什么我们有些网页在手机上看起来文字和图片都很小。(此时用JavaScript获取页面宽度时,仍然为980px)
-
在移动端页面中,我们可以在标签中添加meta标签,对viewport加以设置。
<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>
-
上面这段代码做了两件关键的事情:
- 设置viewport的宽度为设备的宽度;
- 设置scale=1.0,即窗口默认不缩放;
-
如果你不希望用户缩放你的页面,可以像下面这样做:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maxminscale=1.0"></meta>
即锁定页面缩放为1.0,组织用户进行缩放行为。
2. 百分比布局
- 百分比布局比传统像素布局的优势在于,当用户进行缩放时,页面布局不会因为宽度改变而混乱。
- 当用户缩放过大时,可能造成图片或文字部分被遮挡的情况,可以通过以下方法来解决:
- 对于图片,为其设置padding;
- 对于文字,可用vw来替代px。vw代表文字对viewport的宽度,vh代表高度,在vw体系中,viewport的宽度设置为100vw,依次来换算相对于的文字大小。
3. 弹性布局:Flex
-
传统的网页充斥了大量的float,对浏览器渲染性能具有很大压力。对此,有一种更加灵活的弹性盒子模型——Flex布局。
-
关于弹性布局的相关知识,请跳转MDN网站进行学习,这里不再赘述:
4. Media Query
-
移动端的分辨率五花八门,高分辨率图片在低分辨率的手机里渲染压力大,低分辨率图片在高分辨率手机里又十分模糊,两种情况都非常糟糕。
-
对此,CSS3提供了一种名叫Media Query的显示规则。
<link rel="stylesheet" href="./css/index.css" media="screen and (max-width: 600px)">
上面的代码中,使用link标签引入外部css文件,同时增添了media属性。下面对内容进行解释:
- screen代表媒体的类型为电脑或者移动终端显示屏幕(可用值:all,print,tv等);
- and表示“与”的关系;
- (max-width: 600px)表示媒体的特性,需要放置在圆括号中,代表媒体最大的宽度就是660px;
- 所以整个media的含义是:当屏幕宽度小于等于600px时,该css文件适用。
-
下面进行举例:
screen and (min-width: 400px)
:当屏幕宽度大于等于400px时,应用该css文件;screen and (min-width: 400px) and (max-width: 600px)
:当屏幕宽度大于400px小于600px时,应用该css文件;all and (max-device-width: 480px)
:当设备宽度小于等于480px时,应用该css文件;all and (max-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)
:当所有媒体设备宽度介于481px与1024px之间时,应用该css文件。当portrait
改为landscape
时,则表示匹配横屏的媒体。
-
有了media query,我们就可以针对不同屏幕分辨率的设备分别制作相应的css文件:
<!-- 针对所有设备的基础样式 --> <link rel="stylesheet" href="./css/base.css"> <!-- <=480的手机可用 --> <link rel="stylesheet" href="./css/css480.css" media="all and (max-device-width: 480px)"> <!-- 480<px<1024的手机可用 --> <link rel="stylesheet" href="./css/css481_1024.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px)"> <!-- >=1024的手机可用 --> <link rel="stylesheet" href="./css/css1024+.css" media="all and (min device-width: 1024px)">
-
当然,我们也可以在css文件中指定对应的限制:
@media all and (max-device-width: 480px){ h1 { font-size : 24px; } }
需要注意的是,对应规则的css代码必须放在media的括号中。
5. spite图
-
在桌面端中,文件的并行下载早就受到了关注,在移动端更加引起重视,在移动设备中,并行下载的文件数量十分有限,一般在4~5个。文件多了会影响页面的加载速度。
-
为了解决图片数量下载的问题,雪碧图是一个很好的选择。
-
下面举个例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } li{ width: 250px; float: left; position: relative; font-size: 32px; color: #565656; border-bottom: 1px solid #ccc; line-height: 170px; text-indent: 180px; } li::before{ content: ""; width: 170px; height: 170px; background: url(./image/color.jpg) no-repeat; position: absolute; left: 10px; } li:nth-child(1)::before{ background-position: 0 0px; } li:nth-child(2)::before{ background-position: 0 -170px; } li:nth-child(3)::before{ background-position: 0 -350px; } li:nth-child(4)::before{ background-position: -170px 0px; } li:nth-child(5)::before{ background-position: -170px -180px; } li:nth-child(6)::before{ background-position: -170px -350px; } li:nth-child(7)::before{ background-position: -340px 0; } li:nth-child(8)::before{ background-position: -340px -190px; } li:nth-child(9)::before{ background-position: -340px -340px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </body> </html>
显示结果:
- 利用spite图,可以减少并行图片的下载,加快渲染速度。
6. 图标字体
-
图标字体是取代图片,用来展现特殊图标和特殊字体的一种重要手段,其普及的速度十分之快,一些著名的网站如:阿里巴巴矢量图标库、fontawesome等都有许多精美的图标字体;
-
下面我们利用一套图标来演示一下图标字体的用法:
-
以FlatUI为例,先从官网上下载相关字体文件,引入页面:
@font-face{ font-family: 'flat-ui-pro-icons-regular'; /*三选一*/ src: url('./font/glyphicons/flat-ui-pro-icons-regular.ttf'), /*常见的矢量字体封装格式*/ url("./font/glyphicons/flat-ui-pro-icons-regular.eot"), /*SFNT子集化后压缩*/ url('./font/glyphicons/flat-ui-pro-icons-regular.woff'); /*SFNT压缩后的文件*/ }
-
新建一个h1标签,在其before伪类中引入字体,注意:
content
的内容为unicode编码:h1::before{ font-family: 'flat-ui-pro-icons-regular'; content: '\e608'; margin-left: 20px; }
-
最终在页面的呈现效果:
-
值得一提的是,图标字体的颜色可以跟随标签的颜色而改变;若要使用彩色的icon时,单色的图标字体时无法实现的,需要用svg或者图片来实现。
-
7. 移动端的交互
-
在移动设备上,人们的交互方式由鼠标键盘转变为触摸,因此,一遍的交互事件也需要换成适合移动端的事件;
-
传统的click事件在移动设备上会有大约1s的延迟,因为手机浏览器需要判断用户时长按还是点击;
-
要使移动端的体验更为流畅,可将点击事件换为touch事件:
let btn = document.getElementById('btn'); btn.addEventListener('touchstart',function(ev){ console.log(ev.touches.length) }) document.body.addEventListener('touchmove',function(ev){ console.log(ev.target) })
-
touch中共有touchstart、touchmove和touchend三个事件;
**touchstart:**触摸开始的时候触发
**touchmove:**手指在屏幕上滑动的时候触发
**touchend:**触摸结束的时候触发
-
并且每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表;
targetTouches:位于当前DOM元素上的手指列表;
changedTouches: 涉及当前事件手指的列表。
-
每个触摸点由包含了如下触摸信息(常用):
dentifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX
/pageY
/clientX
/clientY/screenX/screenY
:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
-
除了touch事件外,ios还提供了gesture事件,即多指操作。当有两根以上的手指触摸屏幕时,就会触发该事件:
document.body.addEventListener('gesturechange',function(ev){ console.log("手指旋转角度为:" + ev.rotation); console.log("手指旋缩放为:" + ev.scale); })
-
gesture 事件如下:
gesturestart:当一个手指已经按在屏幕上,另一个手指又触摸屏幕的时候触发。类似于touchstart的作用一样;
gesturechange:当触摸屏幕的任何一个手指的位置发生变化的时候触发。gestureend:当任何一个手指从屏幕上面移开时触发。
8. 一些小细节
-
获取用户客户端信息:
console.log(navigator.userAgent);
-
获取到客户端信息后,可利用正则表达式进行判断,并推送不同规则的css样式或者页面跳转。详情请见这篇文章:
-
获取用户的网络环境:
console.log(navigator.connection.type);
-
获取用户屏幕状态:
console.log(window.orientation || screen.orientation);
-
设置开启首页(IOS):
<link rel="apple-touch-startup-image" href="start.png">
-
设置iTunes链接:
<meta name="apple-itunes-app" content="app-id=123456">
三、移动端开发框架
-
Zepto——移动端的jQuery。Zepto的使用方式与jQuery几乎一致,并且为移动端开发提供了不少接口。
-
BootStrap、Foundation、Semantic、Amaze——前端开发框架,提供了一系列组件和样式,方便开发者使用;
-
Flat UI、BootMetro、Pure、Colors——设计工具包。Flat UI提供了一系列页面的基础元素——图标字体、矢量图形等,注重设计方面的美感,对于设计感不足的开发者十分良好。
-
D3——可视化工具。如果要在网页中展现大量图表和数据,可视化工具只需简单的代码,就可以完成各种高大上的图表。
-
Hammer——轻松控制触摸手势。Hammer.js提供了tap、doubletap、pinch(二指拨动)、rotation、swipe、pan(慢速拖动)等手势事件没事的复杂的手势变得简单起来。切具有良好的兼容性,能识别市面上大多是移动设备。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151956.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...