【从0到1掌握移动WEB开发】关于Viewport的三个问题

Viewport

问题1：一个pc页面在移动设备上展示的效果上怎么样的？

猜想会是下面哪种结果

手机浏览器默认为我们做了两件事情

1. 页面渲染在一个980px（iOS）的viewport
2. 缩放

问题2：为什么渲染时，要有viewport？

为了排版正确

我们可以理解为有两个viewport

• visual viewport
• layout viewport

注意：layout viewport，不是原页面的大小

问题3:为什么不使用默认的980px的布局viewport来开发？

• 宽度不可控制，不同系统不同设备的默认值都可能不同
• 页面缩小版显示，交互不友好
• 链接不可点
• 有缩放， 缩放后又有滚动
• font-size为40px等于PC傻姑娘12px同等物理太少，不规范