简言 Mobile First Design 与 HTML Vi

背景

• 窄屏设备（如手机）通常在一个虚拟视口（Virtual Viewport）下渲染页面，其宽度通常比屏幕实际宽度更大
• 页面打开之后，该虚拟视口会被缩放至和屏幕一样宽
• 因此，未面向窄屏优化过的网页在手机上打开会被默认缩小

原因

• 传统网页通常被设计展示在固定且较宽的视口之下（面向 PC）
• 如果视口太窄，原有布局设计会被破坏掉

优化

• 如果页面是面向窄屏优化是设计的，那么可以添加 viewport 标签，使得浏览器虚拟视口和屏幕宽度保持一致
• 例如：<meta name="viewport" content="width=device-width, initial-scale=1" />

参考

• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
• https://a11yproject.com/posts/never-use-maximum-scale/