前端移动开发中，响应式viewport写死一个值和使用device-width有什么不同？

Question

最近看到公司项目的做法是所有页面都设定viewport=640，而之前看到的做法好像更加倾向于使用device-width的做法。

直接写一个值好像在各端展现也很统一，写device-width的反而还要为不同情况写不同样式（起码字体是需要调整吧）。

这两种做法哪种更好？

Answer 1

个人建议还是使用device-width,故名思议就是文档的宽度为设备的宽度,假如使用固定的值640,那么在屏幕宽度小于640像素时，浏览器会出现横向滚动条,如果屏幕大于640像素时,浏览器就会出现空白部分

Answer 2

你可以把 viewport 理解成为浏览器的宽度。

在 iOS 的 Safari 中，viewport 的默认值是 980，也就是说如果不设置 viewport，一个在 PC 端宽度为 980 的页面在 Safari 中是恰好可以正常显示的（正常显示指的是浏览器水平方向不会出现滚动条），但是整个页面可能会相应的缩小。如果页面宽度大于 980，就会在水平方向出现滚动条了，解决办法就是将 viewport 的值变大一些，以便浏览器可以放得下页面。

但是上面这种做法实际上是没有做响应式的，只不过是将 PC 端的页面缩小后放在了浏览器中。因此，在响应式开发时我们一般不会这么干，通常的做法是给 viewport 设置一个特殊的值 device-width，当设置了该值后，你可以认为浏览器的宽度就是它设备的宽度（不同的设备中，device-width 表示的宽度值肯定也是不同的），因此也就不会存在页面缩放的问题了。但是那些在 PC 上可以正常显示的页面在移动端就显示不下了，因此要针对移动端写一些样式。

至于你提到的把 viewport 的值设置成了 640，这样做可能是为了统一不同设备的宽度，假如设计稿的宽度恰好是 640 的话，这样做更容易还原设计稿。（P.S.我怀疑他是不是不同时设置了 initial-scale=0.5？）。

我在平常的工作中一般是会设置成 device-width，但这终究还是要根据具体的项目来定的。对于普通的偏重于展示的页面，设置成 device-width 可能更好一些。但是对于那些活动的 H5 页面，可以尝试把 viewport 设置成具体的值试试，也许会更好处理一些。

这篇文章如果你能看完，相信会对 viewport 有一个清晰的理解。

Answer 3

设置为device-width更加广泛兼容 不过不是说640也不可以 看这个数 莫非只为兼容ios

Answer 4

设置640，写样式会很方便，但是本质上还是靠浏览器自身缩放，会不会是因为会出现字体模糊的问题？

Answer 5

目我前也是设置具体数值，<meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no" />，CSS部分仍然采用设计稿的尺寸，单位也是沿用px，在其他屏幕下能正常显示完整且无滚动条。想问两个问题
1》 这种方法似乎更好维护书写，有什么明显得缺点吗？我比较担心这个。
2》如果用width=device-width，initial-scale=1.0,CSS部分是用rem或者em和百分比来做的吗？