首页 > 前端移动开发中,响应式viewport写死一个值和使用device-width有什么不同?

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

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

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

这两种做法哪种更好?


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


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


你可以把 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 有一个清晰的理解。


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

【热门文章】
【热门文章】