22

Por fin me estoy animando a escribir HTML, y me enfrento con un detalle: al probar mi página Web en un navegador de escritorio, se ve tal como deseo que se vea, pero al probarla en un navegador de celular, se ve demasiado pequeña (quiero decir, se ve tal como la versión de escritorio, pero como si le hubiera hecho un zoom como al 25%).

¿Existe alguna forma sencilla de lograr que, cuando la página sea visitada desde un teléfono móvil, esta tenga un tamaño apropiado? De ser así, ¿cómo?

7

7 respuestas 7

20

Para el problema del zoom tienes que añadir una meta-etiqueta para indicar los valores del viewport.

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

Así por ejemplo indicar que el ancho del navegador del móvil sea igual al ancho de la propia pantalla del dispositivo.

Tienes más información sobre esta meta-etiqueta en el MDN.

Pero realmente NO hay una forma sencilla de hacerlo. Y esto es debido a que depende de muchas cosas, de cómo esté construido tu sitio principalmente.

Diseño responsivo

Hoy en día, al haber tanta variedad de resoluciones, lo ideal es o bien usar versiones de la web diferentes, o, usar un diseño responsivo (Responsive Web Design).

Este tipo de diseños se basan en diseños líquidos (generalmente) en los que luego, mediante media-queries se indica en CSS cómo debe de comportarse el diseño dependiendo del tamaño de la pantalla.

Un ejemplo muy simplista, sería que en una resolución de 1024*768 se verían cuatro columnas y en una resolución de 320*480 se vería una.

1
  • 1
    Muchas gracias por tu respuesta. Probaré para ver qué tal funciona.
    – Barranka
    Commented el 3 dic. 2015 a las 8:13
13

Utiliza media queries

Las media query son el mecanismo que tiene CSS para testar ciertos aspectos del User Agent y el dispositivo donde se esta mostrando el documento. Esto incluye las dimensiones de la pantalla, pero también puedes saber si se trata de una impresora, cosa muy útil.

Cada media query es una expresión lógica que puede ser veradadera o falsa, (es similar a un IF).

Hay 3 formas de usarlas:

Por medio del atributo "media" del elemento "link", es decir utilizando distintos archivos .css para cada "variante" de tu pagina.

 <link rel="stylesheet" media="screen and (width <= 640px)" href="mobiles.css" />
 <link rel="stylesheet" media="screen and (width > 640px)" href="escritorio.css" />
 <link rel="stylesheet" media="print" href="para_imprimir.css" />

Importando mas estilos dentro de un archivo CSS, al igual que antes, utilizas diferentes archivos CSS para cada variante.

 @import url(mobiles.css) screen and (width <= 640px);
 @import url(escritorio.css) screen and (width > 640px);
 @import url(para_imprimir.css) print;

Aplicando estilos de forma condicional dentro de un CSS (mi preferida)

.clase {
   // propiedades comunes a todos los medios aqui.
}

@media screen and (width <= 640px) {
  .clase {
    // propiedades para mobiles aqui.
  }
}  

@media screen and (width > 640px) {
  .clase {
    // propiedades de escritorio aqui
  }
} 

@media print {
  .clase {
    // propiedades impresora aqui.
  }
} 

Hay otras variables que pueden ser testeadas para decidir que estilos utilizar, por ejemplo la orientación de la pantalla:

@media (orientation:portrait) { 
   // el celular o tableta esta en modo retrato
}

@media (orientation:landscape) { 
   // el celular o tableta esta apaisado
}

Te recomiendo que leas el borrador de media queries para ver que otras opciones tienes disponibles.

2
  • 1
    Yo recomendaría mejor usar flexbox...
    – roadev
    Commented el 3 dic. 2015 a las 15:02
  • 2
    @roadev seria muy positivo para todos, si puedes aportar otra respuesta explicando como lo harias con flexbox. Commented el 3 dic. 2015 a las 15:04
6

Bueno, aunque haya gente que dice que no es sencillo, yo uso Bootstrap para las app web grandes y lo complemento con CSS3.

Ahora bien, si tu app es pequeña y esta bien formada, con un par de tags @media que cambien la proporcion tendrás suficiente:

Primero define un contenedor para tu html con las columnas que necesites, estas van a ser las responsive y los elementos dentro deben ser de posicion relativa y tamaños con porcentaje, ¡NUNCA CON PIXELES FIJOS!

Despues define el tamaño de las columnas estandard, las de pantalla media y las de movil(imaginemos 3 columnas en grande, 2 + 1 en medio y 3 filas en moviles.

/* Tamaño estandard para escritorio */
.col-1 {width: 33.33%;}
.col-2 {width: 33.33%;}
.col-3 {width: 33.33%;}

@media only screen and (max-width: 768px) {
    /* Moviles y tablets: */
    [class*="col-"] {
        width: 100%;  /* todas las columnas ocupan el 100% creando 3 filas */
    }
}

@media only screen and (max-width: 1499px) and (min-width: 800px) {
    /* tamaño de pantalla mediana / pequeña */
    .col-1 {width: 50.00%;}
    .col-2 {width: 50.00%;}
    .col-3 {width: 100.00%;}
}

Y listos, para que quede claro, mira este ejemplo en vivo en fiddle y cambia el tamaño de la pantalla para ver los 3 layouts que se crean dependiendo del tamaño.

NOTA: he puesto un footer extra en el ejemplo para dar informacion.

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

    /* Tamaño estandard para escritorio */
    .col-1 {width: 33.33%;}
    .col-2 {width: 33.33%;}
    .col-3 {width: 33.33%;}
    
    @media only screen and (max-width: 768px) {
        /* Moviles y tablets: */
        [class*="col-"] {
            width: 100%; /* todas las columnas ocupan el 100% creando 3 filas */
        }
    }
    
    @media only screen and (max-width: 1499px) and (min-width: 800px) {
    	/* tamaño de pantalla mediana / pequeña */
        .col-1 {width: 50.00%;}
        .col-2 {width: 50.00%;}
        .col-3 {width: 100.00%;}
    }
  <body>

<div class="row">

<div class="col-1 menu">
<ul>
<li>El vuelo</li>
<li>La ciudad</li>
<li>La isla</li>
</ul>
</div>

<div class="col-2">
<h1>La ciudad</h1>
<p>texto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplotexto de ejemplo</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>QUE?</h2>
<p>texto de ejemplo</p>
<h2>DONDE?</h2>
<p>texto de ejemplo</p>
<h2>COMO?</h2>
<p>texto de ejemplo</p>
</div>
</div>

</div>

<div class="footer">
<p>Para ver como funciona el ejemplo cambia el tamaño del explorador o del area de resultado.</p>
</div>

</body>

5

Sin duda Bootstrap es un buen candidato para que realices tu página responsive, es muy sencillo de usar, puedes usarlo en "html plano" (sin framework), tiene una buena documentación, amplia comunidad y su esquema general es sencillo de entender y usar.

3
  • 4
    En lo posible trata de que las respuestas incluyan un poco mas de información que el nombre de la herramienta. Tal vez un resumen de sus principales funcionalidades ayudaría a que sea mas consistente :)
    – Washu
    Commented el 3 dic. 2015 a las 8:04
  • @Washu en mi opinión no tiene sentido, puesto que dichos ejemplos cambian (con frecuencia hay respuestas que quedan obsoletas) y la principal funcionalidad está claramente expresada.
    – josejuan
    Commented el 3 dic. 2015 a las 8:06
  • con el editado esta mejor :P.
    – Washu
    Commented el 3 dic. 2015 a las 8:08
5

Realmente no hay una manera fácil para hacerlo automáticamente con una página web ya hecha. Necesitarías hacerla siguiendo un diseño adaptable (o responsive como se conoce comúnmente).

Básicamente tendrás que jugar con las CSS media queries, siendo screen el media type para pantallas de ordenador y handheld para móviles.

La cosa quedaría así para móviles, por ejemplo:

<link media="handheld" type="text/css" href="/css/movil.css" rel="stylesheet">

Y así el que ya estás usando para ordenadores de sobremesa:

<link media="screen" type="text/css" href="/css/index.css" rel="stylesheet">

Para más información te dejo aquí un par de referencias en castellano, de Google y de Mozilla.

1
  • Afortunadamente, apenas estoy empezando a escribir la página (nunca me había decidido a escribir HTML), así que estoy a tiempo de probar estas modificaciones. Muchas gracias
    – Barranka
    Commented el 3 dic. 2015 a las 8:12
1

Yo quisiera agregar acá Foundation Zurb, en su versión 6. Es completamente responsivo, con muchos añadidos, diseño en grilla, muchos complementos javascript para funciones para móviles, está completamente enfocado a responsivo.

Que te puedo decir, es soprendente, está implementando muchas de las tecnologías que ya se han vuelto moda, además de otras nuevas. Tiene bastantes librerías para modales.

Además tiene ya un paquete npm y bower para cli, plantillas prediseñadas sencillas, si deseas algo básico, o completas, para trabajo pesado, con archivos configurados para gulp o grunt, faltaría webpack, paquetes de compilado sass y js, entre otros.

Yo mismo voy a implementarlo ahora, pero esta vez en serio, modificando sass sólo en lo que necesite y agregando únicamente los módulos que son necesarios, con lo cuál no sólo quedará responsivo, sino que además será mas liviano.

1

Yo también habría hablado de framework como Bootstrap y habría hablado de usar width y max-width con valores porcentuales en el CSS y el uso de media query.

Lo único que me gustaría agregar a las otras respuestas se refiere al uso del enfoque mobile-first.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap o otro -->
<style>
.ejemplo{font-size:24px}
@media (min-width: 768px){.ejemplo{font-size:36px}}
</style>
</head>

<body>
<div class="ejemplo">Texto texto texto texto.</div>
</body>
</html>

En particular, prefiera @media (min-width: ) en lugar de @media (max-width: ) porque el estilo principal es para dispositivos más pequeños, no al revés:

.ejemplo{font-size:24px}
@media (min-width: 768px){.ejemplo{font-size:36px}}

debe preferirse a

.ejemplo{font-size:36px}
@media (max-width: 767px){.ejemplo{font-size:24px}}

Lo siento pero solo hablo italiano y utilicé el traductor de Google :)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.