viewport相关问题

Question

在移动端网页开发过程中，我们通常会将viewport 的width设置为device-width，这样能保证所有页面能完全显示，但是这样一来，对于设计稿的还原似乎显得比较困难。比如一个button设计稿上是100px宽，在width=device-width的情况下，不同移动设备上看去效果并不一致，可能在小屏幕的iphone5上显示比较舒服，在大屏的iphone6s plus上就显得太小了。而将width设置为一个固定值，比如640px，各个页面看上去都会比较一致。

问题来了，到底该如何取舍呢？

Answer 1

个人习惯吧。

Answer 2

我一般是使用rem做单位，然后媒体查询适应不同屏幕，这样不同屏幕下就可以基本保持一致了。

Answer 3

个人习惯用device-width，然后将宽度分段适配，不同宽度段给button设置不同宽度

Answer 4

不建议在 meta[name=viewport] 中将 width 设为某个具体的数值的. 因为一旦设备独立像素大于这个值, 这个值就失效了. 你可以试试写一个 width=300 然后在 iphone5 里面获取 document.documentElement.getBoundingClientRect().width.

针对不同分辨率适配问题, 现在比较好的解决方法是用 rem 计算. 相关的原理我曾在 https://segmentfault.com/a/11... 里面写过.

淘宝手机版有一个 flexible 方案被广泛使用, 题主可以试试.