我正在使用 <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>
我认为这与视口(viewport)有关？但是，我对此并不完全确定!
最佳答案
<meta name="viewport" content="width=device-width, initial-scale=1.0">
此元标记允许您定位移动设备并将宽度设置为屏幕大小。
提供的文档 here!
还可以考虑迁移到引导 CSS 框架以进行响应式网页设计! Twitter Bootstrap
关于html - 如何使 html 页面自动适合移动设备屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32782454/