中易招聘手机网站开发计划

移动平台meta标签
什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
Viewport 基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
或直接在DW创建中创建流体网络布局

format-detection 用法
你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：
telephone=no就禁止了把数字转化为拨号链接！
telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！
apple-mobile-web-app-status-bar-style
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
加了该meta的情况
4、Meta 之 apple-mobile-web-app-status-bar-style
 作用是控制状态栏显示样式
status-bar-style:black
status-bar-style:black-translucent

Css
Css自适性算法
创建流动布局的第一步是创建一个首选的固定宽度的模拟，这样一来，设计师能看到其比例，然后使用神圣的比例、平衡和合适的间距技巧。
从上述简单的布局中，我们可以看到如何在css中规划代码。960px是我们的固定宽度，对于任何小于该尺寸的分辨率屏幕，我们将迫使水平滚动条出现。所有内容在一个880px的wrapper里，在左右两侧有40 px的margin，元素间有20px的间距。
在我们思考其可用性之前，一切安好。这种类型的布局可能适合很多用户，但未必适合每一个人。因此，我们将其转换成流动布局，如果欲使这一布局在任何分辨率下保持其比例，我们必须将960px的宽度改为100%，然后计算出与880px、640px、200px等值的百分比。
这需要一些理性思考，在我们模拟的固定宽度设计中，在960px的设计中，整个wrapper是880px，如果需要与其等价的百分比，我们所要做的是相除。
800pixels / 960pixels = 0.91667
采用十进制，将其转换成百分比，得到的是91.6667%。因为当前浏览器处理百分比的差异，它不会很明智的将所有小数位数应用到布局之中，浏览器要么向上取，要么向下舍。因此，我们需要一个整数，既然它更接近于92%，我们就向上取，稍后因为额外间隙的存在，我们需要向下舍，这很容易做到。
#wrapper {
width： 92%;
}
对于content和sidebar区域，我们如法炮制，但需保持正确的比例。因为这个区域在880px的wrapper内，我们需要找到相对于这个区域的百分比。
640 pixels ÷ 880 pixels = 0.727272 › 73%
220 pixels ÷ 880 pixels = 0.25 › 25%
width： 73%;
}
#sidebar {
width： 25% ;
}
在处理流动设计的比例时，这是一个非常简单的概念，也是更有效的处理方式。借助于这样的技巧，设计者没有理由说不能保持其比例，美观的布局被破坏。
关于margin
设计者可以用不同的方法处理margin，一种方法是计算margin的百分比（此例中为200px/880px）；另外一种是设置固定的margin，在我们的例子中，硬性大小为20px。
详情猛击: http://www.chinaz.com/design/2009/0810/86224_2.shtml

CSS布局
Media Queries可以针对不同设备的一些Media属性设定不同的CSS属性或者是不同的CSS文件调用。
Max-width 和 min-widht：
max-width表示最大宽度，也就是说在不超过该宽度下的情况下执行。所以@media only screen and (max-width: 1024px) {}
min-width表示最小宽度，也就是说在: 481px以上像素执行。
例如：@media only screen and (min-width: 481px)

移动web开发注意事项
1. 通常来说，如果尺寸大的图片加载将十分耗费时间，作为开发者和设计者，必须看清醒认识到，移动用户很多是使用低速的网络去访问你的应用的（不要老想着用户使用3g,4g网络！），所以能避免使用图片的地方应该不使用图片。
2. 不同移动设备对图片的分辨率等的自适应是个难题，因此必须在测试阶段就要充分重视这个问题，做好测试工作。
3. 不要依赖javascript
4. 避免使用下拉菜单
详情猛击 ：http://mobile.51cto.com/web-358443.htm
HTML5 API 帮助
 帮助地址 ：http://www.html5china.com/
Css3 API帮助
http://www.html5cn.org/portal.php?mod=list&catid=41
特效（可选）
 如果页面开是采用HTML5+css3 可使用该特效
http://jquerymobile.com/

参考网站
前程无忧：http://3g.51job.com
鑫空间：http://www.zhangxinxu.com/jq/mobile/index.php
百姓网：http://jilin.baixing.com/m/
无忧考试：http://3g.51test.net/m#m/www.51test.net