时间戳

首页 > 解决方案 > 如何使静态 html 页面缩小或拉伸以适应移动屏幕？

responsive-design - 如何使静态 html 页面缩小或拉伸以适应移动屏幕？

问题描述

您好，我正在使用简单的 HTML（没有响应式框架 - 对 Web 开发来说非常新）和 CSS。我想为仅移动屏幕制作一个页面。我知道有可用的响应式布局和框架，但此时我不想使用它。

有没有办法“缩放”（而不是像响应式设计和弹性盒设计那样重新排列）HTML 页面以适应 100% 的屏幕。（没有滚动，只有 100% 适合屏幕 - 更像是一个移动应用程序）。

标签： responsive-design

解决方案

如果你：

  • 避免显式设置页面元素的宽度，例如图像或 div 的宽度
  • 并且您的文档头部没有视口元标记，例如<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 并且您的 CSS 中没有媒体查询，例如@media (max-width: 480px) {... }

然后智能手机通常会缩放页面以适应屏幕。

祝你好运，希望这会有帮助！

推荐阅读