如何使html页面自动适合移动设备屏幕？

发布时间：2020-12-14 18:47:49 所属栏目：资源来源：网络整理

导读：我使用 iframe在html页面上放置了一个Formidable Form,但我希望它能在移动设备上全屏显示.到目前为止,我使用以下代码： !DOCTYPE htmlhtmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8" / style @import url(http://fonts.googlea

我使用< iframe>在html页面上放置了一个Formidable Form,但我希望它能在移动设备上全屏显示.到目前为止,我使用以下代码：

<!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>

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

解决方法

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

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

文档提供here!

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!