The mobile browser has a viewport by default. The default viewport of most mobile devices is 980px. If a PC page is 980px wide, it will be rendered at 980px and then scaled according to a certain ratio. If the page is fully displayed on the mobile phone, if the page is 1200px, then the extra 220px is not within the default viewport of 980px. How to render this extra part? Is it rendered according to the actual 1200 and then scaled to the mobile phone screen? Or render according to 980px?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Viewport can be configured. The default is generally 980px and does not scale. At this time, 1200 will be displayed outside the screen and the page will be stretched. The result is a scroll bar appearing below (different mobile phones handle it differently).
If a width is specified for the viewport, then 1200px will be scaled to fit the width.