如何使 html 页面自动适应移动设备屏幕？答案

【问题标题】：How can I make an html page automatically fit mobile device screens?如何使 html 页面自动适应移动设备屏幕？
【发布时间】：2015-12-23 07:15:23
【问题描述】：

我正在使用<iframe> 在 html 页面上放置一个强大的表单，但我希望它在移动设备上全屏显示。到目前为止，我正在使用以下代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style>
  @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

  body {
  background-color: #f3eedd;
  width: 750px;
  overflow:scroll;
    overflow-x:hidden;
  }

h2 {
    font-size: 20px;
    color: #c13e18;
    margin: 10px 30px 10px 30px;
}

</style>
</head>
<body>
<div id="header">
<h2>Book Supheroes Unite</h2>
</div>
<div id="form">
<iframe src="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=sbyrt02
" frameborder="0" scrolling="no" style="width:280px;height:535px;"></iframe></div>
</html>

我相信它与视口有关？但是，我对此并不完全确定！

【问题讨论】：

如果我提供的元标记解决了您的问题，请告诉我。
嘿@Chris，meta 工作正常，但是我在 iframe 上遇到了困难......这似乎不想自动缩放以适应设备屏幕！
嗯嗯，看看this 好像可以处理新问题了。
基本上你已经定义了宽度和高度。所以，我愿意打赌，无论如何，您的 iframe 是 280 像素 x 535 像素？
谢谢@Chris 我不知道为什么，但这似乎不是 100% 正确的。如果您有空闲时间，请查看challenge-the-box.com/wp-content/uploads/book-super.html。

标签： html forms iframe mobile formidable

【解决方案1】：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

此元标记允许您定位移动设备并将宽度设置为屏幕大小。

提供的文档here!

还可以考虑迁移以引导用于响应式网页设计的 CSS 框架！ Twitter Bootstrap

【讨论】：

【解决方案2】：

就我个人而言，我会使用像 bootstrap 这样的库来实现这一点，在你的脑海中添加这样的东西。

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap 允许您使用内容创建动态网格，无论设备大小如何。您只需在更大的容器内创建 div，例如流体容器：

<div class="container-fluid">
<div class="row">
    ...
  </div>
</div>

【讨论】：

请注意，您不需要引导程序来实现该元标记。

【解决方案3】：

您可以使用media queries！看起来像这样：

@media (max-width: 640px) {
  //your css to make it full screen
}

【讨论】：