Simulador de Movil Responsive

chiquirf · #1 (**permalink**) 25/01/2017, 14:52

Buenas noches,

Quiero hacer un "simulador de móvil" en una web pero que sea responsive porque no sé donde lo van a visualizar (PC, portatil o tablet), y no he podido hacerlo. Estoy usando Foundation como framework.

Mi idea es tener una capa con position=absolute (llamada capa "app") para mostrarla encima de una imagen de un móvil y que esa capa encaje en la parte de la pantalla de la imagen.

Algo he logrado pero me fallan dos cosas que no sé como arreglarlas.

Primero, al ir cambiando de tamaño la ventana del navegador para probar como se ve, si el alto lo reduzco lo suficiente para que la imagen también lo haga, ya que mantiene su relación de aspecto el ancho de la imagen también se reduce (hasta ahí bien), pero la capa "app" no cambia de ancho, solo de alto. Así mismo, si reduzco el ancho del navegador: la capa "app" no reduce su alto.

El otro fallo que tengo, es cuando recargo la página teniendo el navegador con alto pequeño y ancho amplio; si luego aumento el alto del navegador la imagen no aumenta porque la capa contenedora mantiene el mismo ancho que en el momento que refresqué la página. Pero si así mismo refresco la página otra vez, el ancho se "recalcula" y ya aparece más grande la imagen.

Muestro aquí el código de la Web y en un enlace los ficheros ya con Foundation y todo :)
https://www.dropbox.com/s/5sblnvabmf...orApp.rar?dl=0

Como siempre, muchas gracias de antemano por la ayuda... es para el proyecto de la escuela de una sobrina :)

CODIGO HTML:

Código HTML:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulador movil</title>
    <link rel="stylesheet" href="assets/css/app.css">
  </head>
  <body>


        <div class="row titulo text-center">
          <div class="large-12 columns ">
            <h1 class="">Simulador movil</h1>
          </div>
        </div>
    
    <div class="row text-center ">
      <div class="small-6 columns moviles">
        <div class="iphone">
          <img src="assets/img/iphone-web.png" alt="" class="">
          <div class="row column app-mobile">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            Unde ea eos quas rerum velit sint tempora in consectetur, ipsa minima perferendis, veritatis atque. 
            Repellendus quos, quaerat cum iusto ipsam voluptatibus.
          </div>
          
        </div>
      </div>
      <div class="small-6 columns moviles">
        <div class="android">
          <img src="assets/img/android-web.png" alt="" class="">
        </div>
      </div>
    </div>
    
    

    <script src="assets/js/app.js"></script>
  </body>
</html>

CODIGO CSS (recordar que primero va todo lo de Foundation)

Código CSS:

Ver original.moviles {
  outline:1px solid red;
  height: 80vh;
  position: relative;
}
.iphone, .android {
  outline:1px solid green;
 
  position: relative;
  margin: auto;
  height: 100%;
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
}
 
.iphone img, .android img{
  position: relative;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 100%;
  max-width: 100%;
}
 
.app-mobile {
  position: absolute;
  outline:1px solid green;
  top: 15.5%;
  left: 7%;
  height: 72.3%;
  width: 85%;
}