web-dev-qa-db-fra.com

Comment puis-je faire en sorte qu'une page html s'adapte automatiquement aux écrans des appareils mobiles?

Je mets un Formidable Form sur une page html en utilisant un <iframe>, mais j'aimerais qu'il soit en plein écran sur un appareil mobile. Jusqu'à présent, j'utilise le code suivant:

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

Je crois que cela a quelque chose à voir avec les fenêtres? Cependant, je ne suis pas tout à fait sûr à ce sujet!

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

Cette balise META vous permet de cibler les appareils mobiles et définit la largeur à la taille de l'écran.

Documentation fournie ici!

Pensez également à migrer vers bootstrap un framework CSS pour la conception de sites Web réactifs! Twitter Bootstrap

22
Chris

Personnellement, j'utiliserais une bibliothèque comme bootstrap pour réaliser cela en ajoutant quelque chose comme ça à votre tête.

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

Bootstrap vous permet de créer des grilles dynamiques avec votre contenu quelle que soit la taille de l'appareil. Vous créez simplement des div à l'intérieur d'un plus grand conteneur, par exemple le conteneur de fluide:

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