web-dev-qa-db-ja.com

HTMLページをモバイルデバイスの画面に自動的に合わせるにはどうすればよいですか？

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

ビューポートと関係があると思いますか？ただし、これについては完全にはわかりません！

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

このメタタグを使用すると、モバイルデバイスをターゲットにして、画面サイズに幅を設定できます。

提供されるドキュメント こちら！

また、bootstrap Responsive web designのCSSフレームワークへの移行を検討してください！ Twitter Bootstrap

22
Chris

個人的には、bootstrap=のようなライブラリを使用して、これを実現し、このようなものを頭に追加します。

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

Bootstrap を使用すると、デバイスのサイズに関係なく、コンテンツを使用して動的なグリッドを作成できます。流体コンテナなどの大きなコンテナ内にdivを作成するだけです。

<div class="container-fluid">
<div class="row">
    ...
  </div>
</div>
2
niallhaslam