移动端如何使用视口viewport(最实用)？

概述

首先，视口的作用，请自行查资料。下面讲一下我的理解和使用心得。

使用场景

如果你的ui给你的设计稿是720px的宽度的页面，甚至更大宽度的页面。这个时候你的viewport应该怎么设置，才能保持样式不变，保证你的页面跟设计效果一样？

实践使用心得

1. 如果你设置了如下内容

 <meta name="viewport" content="width=device-width, initial-scale=1">

假如你的手机只有360px，而你的设计稿有720px，那么开发的时候，屏幕最多360px，一行内显示的内容就会减少。就达不到设计稿的效果。

2. 如果你这样设置

<meta name="viewport" content="width=720px">

还是上面的例子，你开发中最大就是720px，这样你的字体就可以跟设计稿一样的效果，而手机端会自动给你整体缩放变小，但是布局不会改变。

总结

综上所述，移动端的视口应该设置成跟设计稿一样的宽度，从而保证整体效果不变。并不是许多人所说，设置成跟设备宽度一样。