¿Como calcular tamaño de elemento en web móvil?

[GekoDH]

Hola.

Estoy haciendo una web de prueba y he descubierto que poniendo <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> en el head la web se adapta a la pantalla del móvil y deja de verse enana. Bien.

El caso es que tengo puesto que mi menú superior sea de 40px de alto y resulta que en mi PC y en mi móvil se ven distinto, concretamente en el móvil se ve sensiblemente más pequeña, como si la pusiese a 30px (aprox) de alto.

La pregunta es, ¿como puedo calcular el tamaño con el que se van a ver los elementos en el móvil si resulta que no es el mismo que en un navegador de PC?

PD: De resoluciones ando flojete.

EDITO: Me equivoqué de subforo, lo quería abrir en "Diseño Web", mil perdones

[garciasanchezdani]

Hola @GekoDH , echa un vistazo a las media queries:

https://developer.mozilla.org/es/docs/CSS/Media_queries

Saludos

[GekoDH]

Gracias, lo de los media queries ya lo conocía y lo estoy usando para mostrar diferente contenido en el navbar según si es un PC o un smartphone. A lo que me refiero es que 40px en mi Galaxy S4 son más pequeños que 40px en mi PC, supongo que porque la resolución del S4 es muy alta y sus píxeles físicos son más pequeños, por tanto 40px en un smartphone a veces son más pequeños que 40px en un PC.

¿Hay alguna forma de calcular los tamaños reales?

[fede5426]

Si usas chrome, apretando el F12 aparece la consola, a la izquierda tiene un icono que es un móvil.. si haces click en él se adapta la pantalla a la de un teléfono (hay varios modelos de teléfonos móviles y tablet para seleccionar, sino podes asignar un tamaño personalizado).

No muestra con exactitud como se va a ver en un la pantalla de un dispositivo móvil pero se acerca muchísimo, sirve mucho (o por lo menos a mi si) para guiarse con las medidas.

Chrome:



Para ver bien la página, requiere actualizar cada vez que se haga un cambio. Si estás en pantalla de pc y lo pasas a móvil, actualizas para visualizarla correctamente (y viceversa).


Mozilla Firefox también trae esta opción (Ctrl+Shift+M), pero no obtuve los mismos resultados que con Chrome.

Firefox:



De los demás navegadores sinceramente desconozco si traen alguna herramienta parecida.

Ojalá te sirva!

Saludos.