移动端包括ipad、itocuch手机等未来移动设备对于webApp等基于浏览器的网站网页都是用基于移动端浏览器内核。而如今流行的手机浏览器基本都是基于webkit内核作为核心。

由于移动端的手机屏幕跟pc端不同，分辨率也是五花八门，所以对于移动端前端页面布局就是很大的挑战。

不过我们既然知道了移动端跟pc端不同 就可以有针对性的进行开发，毕竟移动端的浏览器不牵扯到太多pc端似的各种坑爹的兼容！

viewport：

不得不说的是viewport，这是移动端开发必备的一个meta标签属性。

移动端设备分为屏幕设备大小以及浏览器视口大小，一般来说width表示浏览器视口大小，而device-width表示设备屏幕大小。

比如iphone中safria浏览器默认的视口大小width=980px（不同浏览器默认不同），而device-width一般是320（也就是手机的宽度）；

viewport就是对视口的一个媒体设置标签。

<meta name="viewport" content="参数名称=参数值（多个参数用逗号隔开）" />

主要参数有下面几个：

maximum-scale：用户可以缩放的最大值

minimum-scale：用户可以缩放的最小值

initial-scale：viewport的默认缩放大小

width：固定viewport的宽度

height：固定viewport的高度

user-scalable：是否允许用户缩放

前三个参数都是缩放相关的，改变的大小是网页显示大小。比如要让网页加载时候显示两倍大小就可以加上这个

<meta name="viewport" content="initial-scale=2" />

之后就是width和height，修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器（页面区域）在屏幕上的默认大小。

可以是具体的数值，也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上，防止出现横向滚动条就可以使用

<meta name="viewport" content="width=device-width" />

最后一个是指定是否允许用户自己缩放，也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1，如果要禁止可以把它的值设置为0。就像下面这样

<meta name="viewport" content="user-scalable=0" />

设置了这个属性以后它就不会缩放。一般来说为了更好的用户体验一般都会设置为无滚动条以及不允许缩放，如下：

<meta name="viewport" content="width=device-width" />

最后一个是指定是否允许用户自己缩放，也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1，如果要禁止可以把它的值设置为0。就像下面这样

<meta name="viewport" content="width=device-width,user-scalable=0" />

只要把他们用逗号隔开就可以了，不过有些浏览器不支持width和height设置固定数值，所以最好别用那个。

平时开发时候我们一般会将viewport设置为以下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

其中的意思大家可以参考上面解释去分析。

有关viewport视图分析详见这里

@media:

这是一个css3中的媒体样式，其实是一个函数，浏览器看到这个函数就回去解析里面代码。

例如我们页面中有个元素在pc浏览器上我们希望它显示400*300，而在移动端不同分辨率下希望它显示为200*100、300*150不等：

我们就可以这样去写：

@media (min-width: 768px){

.textImage{

width:400px;

height:300px

}

}

@media (max-width: 768px)and(min-width:400px){

.textImage{

width:300px;

height:150px

}

}

@media(max-width:400px){

.textImage{

width:200px;

height:100px;

}

}

这样我们就可以把一些公共的样式写到一个不用@media样式包含的样式中，把需要根据设备区分显示内容的用@media进行区分

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！