近期的新项目,设计初期打算引入响应式设计,前期我们也做了部分调查和实验。分析了一下,有一个困扰的问题就是,你的站需不需要响应式设计?但是,我们目前打算是今后的移动终端端也能直接使用目前的设计(一次设计),而不需要再花费精力去重新设计和实现(普遍适用)。
有了这些需求之后,就不再纠结了,配合设计组的同学,我们初步定了一下实施计划,目前只是做尝试性的准备工作,构建了部分基础测试页,在各种分辨率的设备中测试了一下,达到了预期的展示效果,但是后期拿到具体内容之后,还得细细的琢磨,重构之。
以下就来记录一下,工作之中遇到的问题。
上一个版本的项目,后期改版中使用了 1200px
总宽设计,当然这里只考虑了 monitors 中的应用场景。在接到这个需求之后,好吧直接上手改了 container 的宽度。当然,前提是已经忽略掉了小分辨率的 monitors(低于这个分辨率,出现横向滚动条),所以后期的分辨率测试工作就省事多了,而且正常的展示效果也不错,因为站点的页面正好是内容展示型的,相比之下,内容是多了一部分。
接下来就测试 phone,tablets,然后等待我的是。。。
当然了不会原样缩小,乖乖的占满整个屏幕。好吧,那我缩小一下,然而部分内容在我 resize 之后,并没有渲染出来。这时我才意识到了问题的严重性,看来针对移动终端得特殊处理一下。Google 之后才得知各设备的 device-width
[^1]。viewport 标签就是针对移动终端所制定的吧,提升页面在移动设备上的表现能力。让页面的宽度和初始比例可以和移动设备相匹配。
这下问题就迎刃而解了。
iOS上的Safari在加载网页时默认会自动将页面宽度设为980像素,这是大多数固定宽度网页的尺寸。随后Safari会缩小页面,以便适合在320或480像素宽的视口中显示。
后续搜索,并测试了,Android 设备默认 viewport-width
是 800px
。(Windows Phone 设备则为 1024px
,这个 google 得来的,手头并没有设备)。下面这个标签的前世今生,就不做说明了,有兴趣的可以自己去查。
1 | <meta name="viewport" content="width=device-width"> |
上面只是基础定义,下面列举一些基本属性,后续需要自己去慢慢研究了。
initial-scale: 初始缩放比例,也即是当页面第一次 load 的时候缩放比例
maximum-scale: 允许用户缩放到的最大比例
minimum-scale: 允许用户缩放到的最小比例
user-scalable: 用户是否可以手动缩放
…
我们页面的宽度是1200,所以在初始的时候定义content="width=1200"
就搞定了,浏览器会自动缩小页面,以便适合在 320px 尺寸的 viewport 中显示。iPhone,iPad的横竖屏中,device-width
都不相同,这个在相应式设计中得充分考虑到。
这次研究也就到这里了,下期准备放出我们最近测试后的响应式布局方案,这个 viewport(只是初始化) 和 css3 中的 media query 简直就是天生一对。
[^1]: 各设备尺寸 - screensiz.es