“移动端”宴席知多少

来源：互联网发布：java数据传输加密技术编辑：程序博客网时间：2024/05/17 05:55

转：http://adt.aicai.com/index.php/archives/179/

瞎折腾移动端的项目已经很长一段时间了，并不像其它企业一样，可以有项目组去完成，基本都是一个人瞎尝试，时而web，时而web app。恍恍惚惚过了这段岁月，也不晓得自己忙了啥。总叫别人去总结，让别人学会总结，也该为自己总结总结了。也为了团队之间更好的知识共享吧。如何开发移动端就跟如何上菜一样，上菜有规则，先冷后热，先菜后点，先咸后甜，先炒后烧等等。按照一定的程序来才能恰到好处地掌握。那么，现在还是上菜吧，客官等久了... ...

前菜（凉菜，冷盘）

一、移动端开发与PC端开发不同
大家都知晓，手机种类千千万，也导致移动端开发面对的屏幕尺寸是各种头疼。
Web：固定布局和弹性布局
Web app：响应式布局

二、调试工具
firefox的响应式设计视图:Firefox 浏览器内置了自定义设计视图的功能，可以通过 Firefox->Web 开发者->自定义设计视图（或者摁下 Shift + Ctrl + m ）。相比网络工具，运行更加流畅，无需联网。

Chrome开发，chrome浏览器也有个Emulation，如图：

chrome

另外，就是设备上的调试，方法很多。

1. 直接把做好的静态页面放到手机用浏览器打开查阅
2. 在本地搭建环境，比如php环境，局域网访问ip查阅页面（有搭建过博客的都知道）
3. 远程调试

A:Android 设备 Chrome 远程调试
B:uc浏览器开发者调试

开胃汤

那么，问题来了，移动端开发到底该如何下手？
1．关于viewport

a)概念：设备的pixels和css的pixels（总体而言，你只需要关注CSS的pixels，这些pixels指定你的样式被如何渲染。
）
b)概念：视窗 viewport（viewport的功能在于控制你网站的最高块状（block）容器：<html>元素。）

viewport

viewport2

下面是link的一些用法，但是移动端也好web端也好，为了减少HTTP请求数，个人建议最好能使用媒体查询来解决的可以尽可能的用媒体查询。

link

媒体查询如下：

媒体查询

头菜

作为头菜，一般宴会来说，头菜是代表性的菜点。那么说到移动端呢？

移动端的reset
时过境迁，Reset 逐渐淡出的前沿前端的视野，normalize.css 取而代之。normalize.css，统一样式的同时保留可辨识性；reset 统一样式，完全没有可读性，破坏原有标签的语义化。针对每个项目的不同，各自可以基于Normalize.css，根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式。
在这里会提到一个rem,想当初应该很多人也讨论研究过px，pt，em等单位吧。rem是CSS3新引进来的一个度量单位，举个例子：“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
浏览器的基准字号设置为 62.5%，也就是 10px，现在 1rem = 10px —— 为了计算方便。然后在body 上应用了 font-size: 1.6rem;，将页面字号设置为 16px。
html {font-size: 62.5%;} body {font-size: 1.6rem; /* =16px */}
可以用以下的代码片段保证在低端浏览器下也不会出问题

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px /

移动端的html5+css3

css3代替DOM animation,使用setTimeout定时器, 定时修改DOM元素的style属性。
css3使用设备GPU渲染，动用硬件设备本身的计算能力来做一些展示，效率上要比DOM animation要高很多。

@keyframes
    animation-name（动画名称）
    animation-duration（动画持续时间）
    animation-delay（延迟执行时间）
    animation-timing-function（动画形变函数指定）
    animation-play-state（播放状态指定）
    animation-iteration-count（无限循环）

至于HTML5，大家目前用的最多的也就仅仅是那几个标签而已，想详细了解的自便吧。比如：

<input type="text" placeholder="规定帮助用户填写输入字段的提示">
<input type="number">
<input type="date">
<input type="range">
<input type="color">
<input type="email">
<input type="search">

移动端的javascript

先说这一类的框架吧：
JQuery mobile，Sencha Touch等都是很庞大的UI框架。
Zepto.js：框架小，类jQuery，没有多余的其他模块，适合团队自己扩展。（不支持WP）
没有一个很好的团队去折腾的话，还是建议使用jqm，因为你到后面还是会改成jqm搭配Hammer.js来搭建

说起移动端的javascript，使用手势操作代替鼠标输入/出事件。开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。那就先来看看PC端的一些事件：(mousedown, mouseup, click)

移动端的手势事件：
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel //当在滑动手机的过程中突然出现一个系统事件，比如电话。这会就cancel掉。（基本很少用）

为何要用touch事件代替click事件？
- click事件300ms延时
- touch事件支持多点触摸
- 手势操作

移动端的css3的自定义字体（@font-face），前一篇文章有做介绍。这里就不详细述说。

主菜

有人会问，图片该怎么切，拿到的psd文件尺寸是多少，按照何种尺寸去制作？还是无从下手。那么，移动端页面那么小，做页面的时候按照何种安全可视尺寸来呢？

alert('width:' + window.innerWidth + ';height:' + window.innerHeight);

目前我知道的移动端可视区尺寸

iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)
Note2 360 * 567 (未隐藏URL与状态栏)
iPad 3/4 768*928 (未隐藏URL与状态栏)
GALAXY SIII 360 * 567 (未隐藏URL与状态栏)
小米2A 360 *567 (未隐藏URL与状态栏)
HTC G10 320 * 460
酷派大神 400615/400568(未隐藏URL与状态栏)

设计稿按照640的尺寸去切（有的人按照480的去切，主要是考虑图片资源的浪费），然后页面可以当作是320的来写，也就是说，字体大小以及图片大小，在页面制作的时候都需要除以2。

为什么要按照640的来切，却用320的来制作呢？因为设备分辨率太多，图片切大的去压缩，在高分辨率的设备，图片就不会变得很小了。
其实结果可知，手机端页面，因为上面viewport设置了，一般浏览器都是320，360，400这类宽度制作页面。

1、meta，link都有了
2、css reset也有了
3、尽可能的使用Flexbox 布局，尽量放弃float
4、图片的切法和媒体查询
5、移动端js的事件使用
6、最后手机测试完美收工
（简单粗糙上档次吧？）

甜品（饭后闲谈消化）

这里我必须说的是局部刷新，定位问题吧。
position:sticky与position:fixed布局，因为存在太多兼容bug，于是都会利用iscroll来解决这个问题。
如何使用，请移步iscroll官网查阅，这里不作详细说明。因为这里每一个点都可以来了说一篇或者好几篇文章。

盒子边框溢出
当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。

ios数字颜色样式超过9位后失控
这个问题我不知道该怎么描述，就是在ios中，当数字超过9位数时，浏览器会给这个数字默认加上一个颜色，无论你设置什么颜色都无效。

css3关于background-size缩放背景图像的使用;如何用flex和translate等分，居中。

0 0