开头以为移动端的布局就是设备像素低了一点，然后用响应式的@media来设计页面就好了，然而我还是太天真了。
开头直接上了text-align:center,然后发现字都没了，然后我发现，css里面的像素和实际设备显示的像素真的不一样，然后就发现，不得不了解一些移动端特有的概念，物理像素什么的，对我来说不算抽象，然后主要是viewport的使用。
浅谈移动Web开发（上）：深入概念 这篇文章里面viewport有一个比较容易的例子吧
<meta name="viewport" content="width=device-width, initial-scale=1">
通过设置width=device-width，指定布局宽度等于手机分辨率宽度（但是我们不用关心手机分辨宽度是什么）来更好的利用响应式设计。注意这里的device-width表示手机的分辨率宽度，而并非手机物理像素宽度。iPhone4在垂直状态下物理像素宽度为640，这里的device-width代表的则应该是它的dip像素320px。
这个我的理解是设备物理像素点大小的问题，手机现在出现很多高清屏幕，但是高清屏幕相比来说，是像素点更加密集，从而造成显示效果会比较好。
网友评论