如何使 html 页面自动适合移动设备屏幕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32782454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make an html page automatically fit mobile device screens?
提问by Marc
I am putting a Formidable Form on an html page by using an <iframe>, but I'd like it to be full screen on a mobile device. So far I'm using the following code:
我正在使用 将一个强大的表单放在 html 页面上<iframe>，但我希望它在移动设备上全屏显示。到目前为止，我正在使用以下代码：
<!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>
I believe it has something to do with viewports? However, I'm not entirely sure on this!
我相信它与视口有关吗？但是，我对此并不完全确定！
回答by Chris
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag allows you to target mobile devices and sets the width to the screen size.
此元标记允许您定位移动设备并将宽度设置为屏幕大小。
Documentation provided here!
Also consider migrating to bootstrap a CSS framework for Responsive web design! Twitter Bootstrap
还可以考虑迁移到引导响应式网页设计的 CSS 框架！推特引导程序
回答by niallhaslam
Personally I would use a library like bootstrap to acheive this adding something like this to your head.
就我个人而言，我会使用像 bootstrap 这样的库来实现这一点，在你的脑海中添加这样的东西。
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrapallows you to create dynamic grids with your content regardless of the device size. You simply create divs inside a larger container for example the fluid container:
无论设备大小如何，Bootstrap 都允许您使用内容创建动态网格。您只需在较大的容器（例如流体容器）内创建 div：
<div class="container-fluid">
<div class="row">
...
</div>
</div>
回答by Axel Lavielle
You can use the media queries!
looks like this:
您可以使用media queries！看起来像这样：
@media (max-width: 640px) {
//your css to make it full screen
}
