简言 Mobile First Design 与 HTML Viewport

背景

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

原因

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

优化

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

参考

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。