学习手机端网站制作，有没有好的书籍推荐？跟PC端网站前端有啥不一样的？

Question

大家好，真诚求教个问题：

手机端的网页制作，有没有权威书籍推荐?

手机端网站跟PC端制作，有哪些不同？

我找了半天，也没有看到这方面很详细全面的书籍，求高手指点！

Answer 1

PC版的网站普遍width宽度都是固定的，比如常用的980px。一般情况下，PC显示器的分辨率像素px可以认为等价于CSS里像素的值，但手机上就不一样了，比如5英寸1080P（1920×1080）分辨率的手机比如小米4，其window.document.body.clientWidth也就是viewport的width只有360px，显然，手机上的CSS中的1px并不等于手机屏幕的1px。

所以，手机版网站，特别之处就在于要做宽度自适应，先来一句声明：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放.

布局方法：
1、width:320px; 固定宽度居中，在iPhone4上效果刚好，但大一点的手机，两边就会有空白，所以这样搞感觉不好。
2、min-width:320px; max-width:480px; width:100%; 最小宽度320px，最大宽度480px，在320px和480px之间自动适应宽度，看起来还行。容器里面的块，你同样可以用百分比布局，比如左边的60%，右边的40%，就算是图片，在合理范围内，宽被拉伸，影响也不大，我现在就用这招。
3、@media(媒体查询)，segmentfault.com用的就是这招，有点编程的味道，有点复杂，个人不感冒。
4、rem等比例适配所有屏幕：
html{ font-size: 20px; } .btn { width: 6rem; height: 3rem; }
这里.btn的6rem等于6×20px=120px。你可以用window.document.body.clientWidth拿到屏幕宽度，然后根据屏幕宽度设置html的font-size的值，从而实现调整整个页面的rem值。这个也有点复杂，我也没用。
5、设置viewport进行缩放：以320px宽度为基准进行缩放，最大缩放为320*1.3=416，方法简单粗暴又高效。

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

Firefox的响应式设计视图(Ctrl+Shift+M)和Chrome的设备模式都能调试移动端网页。

参考: http://isux.tencent.com/web-app-rem.html

Answer 2

本质上来说还是一样的，但是你需要额外考虑或者遭遇这些问题

1. 用户是手指点击而不是鼠标点击，事件处理上你要考虑这两种情况的存在（比如拖拽之类的操作特别需要留意）

2. 同样是事件方面的问题，多了一些手势相关的事件，不过使用时记得留意浏览器的兼容情况

3. 对于用户来说对于网页的载入速度比PC更加敏感，所以文件大小（加载速度）是一个着重的优化项

4. 需要考虑的屏幕分辨率的情况比较多，如果是iPhone想要得到出众的效果，可能还要考虑为Retina屏幕专门设计图像

5. 有时候即使你开着Chrome的手机模拟功能开发完了你所需要的所有功能，到真的手机上去看也可能还会有奇怪的问题

6. 请大家补完

很多情况下你采用一个成熟的HTML5+CSS框架能让你事半功倍，比如Bootstrap或者妹子UI之类的，可以去看看