Come posso fare una pagina html automaticamente idonei dispositivi mobili?

Sto mettendo un Formidabile Form in una pagina html utilizzando un <iframe>, ma mi piacerebbe essere a pieno schermo su un dispositivo mobile. Finora sto usando il seguente codice:

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

Credo che abbia qualcosa a che fare con finestre? Tuttavia, io non sono del tutto sicuro di questo!

Fammi sapere se il meta tag che ho fornito non risolve il vostro problema.
Ehi @Chris meta opere, tuttavia sto avendo un momento difficile con l’iframe… Che non sembrano voler auto scala per adattarsi allo schermo del dispositivo!
Hmmmm, dare un’occhiata a this Che sembra gestire il nuovo numero.
In sostanza si hanno definito la larghezza e l’altezza già. Così, sarei pronto a scommettere che non importa cosa, il tuo Iframe è 280px da 535px?
Grazie @Chris io non sono sicuro perché, ma questo non sembra essere corretta al 100%. Check it out challenge-the-box.com/wp-content/uploads/book-super.html se hai un minuto libero.

OriginaleL’autore Marc | 2015-09-25

3 Replies
  1. 14
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Questo meta tag consente ai dispositivi mobili di destinazione e imposta la larghezza e la dimensione dello schermo.

    Documentazione fornita qui!

    Anche considerare la migrazione di bootstrap CSS, framework per il web design Reattivo! Twitter Bootstrap

    OriginaleL’autore Chris

  2. 2

    Personalmente vorrei usare una libreria come bootstrap per raggiungere questo aggiunta di qualcosa di simile per la testa.

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

    Bootstrap consente di creare dinamiche di griglie con i tuoi contenuti indipendentemente dalla dimensione del dispositivo. È sufficiente creare un div all’interno di un contenitore più grande, per esempio, il contenitore del fluido:

    <div class="container-fluid">
    <div class="row">
        ...
      </div>
    </div>
    Appena nota: non è necessario bootstrap per attuare il meta tag.

    OriginaleL’autore niallhaslam

  3. -2

    È possibile utilizzare il media queries !
    assomiglia a questo:

    @media (max-width: 640px) {
      //your css to make it full screen
    }

    OriginaleL’autore Axel Lavielle

Lascia un commento