想必前端开发的同学们关于手机端一点都不陌生，随着各种视口的设备越来越多，手机端web的开发已经成为前端求职技能必备，关于移动端web技能，学习一些工作中常用到的知识吧。

1、web前端领域，像素分为设备像素和CSS像素

2、在缩放比例为1:1的时候一个CSS像素的大小等于一个设备像素的大小。

3、一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。关于手机移动端web，一些常见问题

viewport模板

其实就是web移动端头部该如何书写：

<head>
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” />
<meta content=”yes” name=”apple-mobile-web-app-capable” />
<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
<meta content=”telephone=no” name=”format-detection” />
<head>

这是不管是pc还是移动端web都首要考虑的问题，下面我们逐条解说一下：

第一个meta中width=device-width;表示viewport的宽度；

initial-scale=1.0;表示初始的缩放比例，我们可以以1:1 的比例进行页面设计。

maximum-scale=1.0;允许用户缩放到的最小比例；

user-scalable；用户是否可以手动缩放；

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

其中第一条尤为重要！

关于手机移动端web，一些常见问题

移动端字体和字体大小的问题

了解到的手机系统 ios、android 等是不支持微软雅黑字体，为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软雅黑字体呢？

@font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载。这也不失为一种方法。

但是响应的会影响网站的打开速度，消耗用户流量。其实用过各种不同系统拨并且关注过字体的小伙伴都知道，安卓与ios有数字自己默认的字体，并且系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别，其实不用刻意去追求某种固定的字体。

媒体查询

媒体查询是响应式设计的基础，也是web移动端不可或缺的一部分。

css中使用媒体查询的语法：

eg：

@media all and (min-width: 321px) and (max-width: 400px){
 .box{
   background：red;
 }
}

上面代码中，媒体类型为all，代表任何设备，并且设备的布局视口宽度大于等于321px且小于等于400px时，让拥有box类的元素背景变红。

这些就是移动端一些常见的问题。最后贴上一个移动端简单例子供大家学习：

http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl