CSS - Simulador de Movil Responsive

 
Vista:
sin imagen de perfil
Val: 1
Ha disminuido su posición en 42 puestos en CSS (en relación al último mes)
Gráfica de CSS

Simulador de Movil Responsive

Publicado por Carlos (1 intervención) el 27/01/2017 10:08:04
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/5sblnvabmfgdz8d/SimuladorApp.rar?dl=0


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



CODIGO HTML:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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%;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 139
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Simulador de Movil Responsive

Publicado por Lopez (33 intervenciones) el 30/01/2017 22:25:02
Hola Carlos,

No hay fallo. Todo funciona como debe.
Pienso en resoluciones de 860px- hacia abajo, mostrar solo una columna, no dos.
Tambien deberias en
Línea 24
1
<div class="row column app-mobile">

Modificar con:
1
<div style="overflow: hidden;" class="row column app-mobile">

O bien, quizas mas util aun si quieres que llamen desde otro dominio,
usar un iframe.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar