Archives du mot-clef html5

Tester ses applications HTML5 sur divers types d’écran

Publié le par
Répondre
Je viens de faire un petit code pas très évolué, mais que je trouve pratique pour tester mes application HTML5 pour les mobiles.En effet il y a beaucoup de taille d’écrans disponibles sur les smartphones, aussi avec ce tout petit code vous pouvez spécifier la taille de votre écran, puis l’URL de votre application et enfin visualiser le résultat en cliquant sur actualiser.

Voici le code : 

<!DOCTYPE html>
<html>
  <head>
    <title>Tets d'ecran de mobile</title>
  </head>
  <body>
    <h1>Tets d'ecran de mobile</h1>
    <hr/>
    Dimensions : 
    <input id="ptb_width" type="text" value="240" size="4" /> x 
    <input id="ptb_height" type="text" value="320" size="4" /><br/>
    URL : <input id="ptb_url" type="text" value="" size="60" /><br/>
    <input type="button" value="actualiser" onclick="update()"/>
    <input type="button" value="retourner" onclick="rotate()"/>
    <hr/>
    <iframe id="ptb_frm" src="" width="240px" height="320px" border="1">
    </iframe>
    <script type="text/javascript">
      var rotation = false;
      function update() {
        var frm = document.getElementById("ptb_frm");
        frm.width = document.getElementById("ptb_width").value;
        frm.height = document.getElementById("ptb_height").value;
        frm.src = document.getElementById("ptb_url").value;
      }
      function rotate() {
        rotation = !rotation;
        frm = document.getElementById("ptb_frm");
        if (rotation) {
          frm.width = document.getElementById("ptb_height").value;
          frm.height = document.getElementById("ptb_width").value;
        }
        else {
          frm.width = document.getElementById("ptb_width").value;
          frm.height = document.getElementById("ptb_height").value;
        }
      }			
    </script>
  </body>
</html>

Vous pouvez bien entendu télécharger ce code qui est sous licence GNU GPL v3.

La page de test (HTML)