我如何使HTML页面自动适合移动设备屏幕？ [英] How can I make an html page automatically fit mobile device screens?
本文介绍了我如何使HTML页面自动适合移动设备屏幕？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用< iframe> 在HTML页面上放置了一个强大的表单，但我希望它在移动设备上全屏显示。到目前为止，我使用以下代码：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-Typecontent =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;
颜色：＃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滚动=nostyle =width：280px; height：535px;>< / iframe>< / div>
< / html>
我相信这与视口有关。然而，我并不完全确定这一点！
解决方案
< meta name = viewportcontent =width = device-width，initial-scale = 1.0>
此元标记可让您定位移动设备并将宽度设置为屏幕大小。
提供的文件此处！
同时考虑迁移到引导响应式网页设计的CSS框架！ Twitter Bootstrap
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:
<!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!
解决方案
<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
这篇关于我如何使HTML页面自动适合移动设备屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
