{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 爱情/是我丢掉的垃圾 的问题《How can I make an html page automatically fit mobi》','https://www.manongdao.com/q-222436.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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!
Personally I would use a library like bootstrap to acheive this adding something like this to your head.
Bootstrap allows 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:
You can use the
media queries! looks like this: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