attribute - title html

Simulación de resolución móvil en una sección de una página web

Question

Tengo un sitio web que se utilizará principalmente para monitores de pantalla grande en el escritorio. Dentro de la página, tendré varias secciones de contenido, pero también quiero tener un área de aplicación móvil dentro de un div que muestre al usuario cómo los elementos de una aplicación móvil pueden tener un aspecto diferente en diferentes teléfonos móviles. Mirando las especificaciones de algunos teléfonos que veo:

• iPhone 7 (4.7 pulgadas) - 1.334 x 750 píxeles (326 ppi)
• iPhone 7 (5.5 pulgadas) - 1.920 x 1080 píxeles (401 ppp)
• Samsung Galaxy S7 - 2,560 x 1440 píxeles (577 ppp)

Obviamente, el ppi es diferente en una pantalla de escritorio que para un teléfono móvil.

¿Cuál sería la mejor manera de simular cómo se verían las cosas y posicionarse en un teléfono móvil? ¿Tomaría simplemente la relación relativa de longitud y altura e ignoraría el trabajo de ppi?

Nota

Estoy familiarizado con las herramientas para desarrolladores de Chrome. Esto no es lo que estoy pidiendo. La sección de la aplicación móvil debe estar en un div en la página. No debería tomar toda mi página y hacer que se vea como una aplicación móvil.

También debe ser algo transparente para el usuario para que no tenga que descubrir cómo usar una herramienta de desarrollador.

Answer 1

En el pasado, cuando tuve que probar esto, cambié el tamaño de mi navegador después de agregar las propiedades personalizadas maxwidth / maxheight a mi CSS. Una vez que llegue a estos límites, su CSS relevante se activará.

Answer 2

No puede usar dpi para nada ya que es una configuración de hardware. debe usar una relación de ventana gráfica para mostrarla en la resolución deseada% dependiendo de donde prefiera: PX o pulgadas (calculadas según el tamaño de la ventana gráfica real que puede leer con javascript).

Otra opción buena y generalmente utilizada es establecer una maqueta de teléfono con una superposición iframe que imprime el contenido que desea, aquí hay un ejemplo extraído:

iframe {
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
z-index: 5;
}

<img style="" src="http://www.mobilephoneemulator.com/images/devices/Apple-Iphone6-wm.jpg">
<iframe id="Iframe" name="Iframe" scrolling="no" frameborder="0" style="transform-origin: 0px 0px 0px; left: 30px; top: 95px; width: 375px; height: 667px; transform: scale(1);" width="375" height="667" src=""></iframe>

Al final, quiere simular, y dar una maqueta agrega una inmersión valiosa, ya que puede agregar elementos receptivos (o fijos) para ajustarla a escala. Emular un dispositivo móvil es un hecho diferente y no viable.

Answer 3

Según entiendo, quiere permitir que un usuario interactúe con una sección de su página web. El usuario puede cambiar el ancho y alto de la sección mediante botones para cada dispositivo o algo. La sección responderá como una página receptiva.

En el pasado, configuré un iframe que apunta a otra página en el mismo dominio. Cambiar el tamaño del iframe debería simular un dispositivo.

Answer 4

Solo estoy familiarizado con las aplicaciones web, por lo que la respuesta se centrará en eso.

El estilo de la aplicación relacionada con el tamaño de la pantalla generalmente depende de:

1. La relación ancho / alto del dispositivo.
2. Ancho / alto de la pantalla informado por el dispositivo debido a las propiedades de estilo establecidas en consultas de medios o mediante javascript. Tenga en cuenta que en los dispositivos móviles, por lo general, esta no es la resolución real, sino la resolución dividida por lo que se denomina " dispositivoPixelRatio ".

Para emular un dispositivo móvil desde la perspectiva de una aplicación, podemos:

1. Establezca la relación de un contenedor a la proporción de un determinado dispositivo móvil. Esto moverá / redimensionará los elementos de una aplicación de la misma manera que cambiar el tamaño de una ventana, o, como lo haría una pantalla pequeña de un móvil.
2. Cargue la aplicación en un elemento <iframe> con un ancho / alto establecido en resolution / devicePixelRatio , de modo que el ancho de un iframe engañe a las consultas de medios , y el estilo personalizado para pantallas más pequeñas surtirá efecto.

Esto hará que la aplicación funcione "correctamente", pero los elementos del iframe parecerán demasiado grandes en comparación con un dispositivo móvil real en una pantalla de computadora típica.

Esto, sin embargo, depende de la resolución y el tamaño físico de la pantalla de la computadora (y no podemos saber el tamaño físico o los dpi por programación, solo adivinar o medir al usuario). Esto significa que no podremos obtener un dispositivo de "tamaño real" en la pantalla de una computadora, solo una conjetura.

Para ayudar con el problema "demasiado grande", no podemos simplemente cambiar el tamaño del iframe, ya que las consultas de los medios dejarán de funcionar correctamente. Por lo tanto, debemos escalar el iframe con una transformación css a un tamaño más razonable. El factor de escala se puede adaptar para diferentes resoluciones de pantalla de la computadora.

El concepto se ilustra en el siguiente jsfiddle: https://codepen.io/Kasparas/pen/mxPOyY

La "Aplicación" que muestran los emuladores está alojada en: https://kasparasanusauskas.github.io/-demos/demo-app-responsive/index.html

La "Aplicación" tiene unos pocos cuadros de tamaño fijo y una consulta de medios @media screen and (min-width:360px) que hace que el fondo sea azul en las pantallas de más de 360px. Esto ilustra la diferencia de diseño y consultas de medios en diferentes pantallas.

Answer 5

Use el siguiente procedimiento para simular diferentes pantallas.

1. Haga clic derecho en cromo y seleccione inspeccionar

2. Seleccione la barra de herramientas del dispositivo alternar

3. Seleccione la pantalla deseada

4.después de seleccionar la pantalla, presione "Ctrl + F5" para actualizar la página

Answer 6

No puede establecer la configuración de DPI en ninguno de los idiomas web (HTML / CSS / JS). Pero en cuanto a la simulación, puede poner el código en un iframe o incluso en un div y luego cargar su sitio web dentro del iframe y luego puede usar la transform:scale() CSS transform:scale() para escalar toda la página depende del PPI de su teléfono móvil.

Como see por ejemplo, iPhone6s tiene 750 x 1334 resolución nativa (píxeles) pero 375 x 667 UIKit tamaño (puntos) y el factor de escala nativa de 2.0 . También se puede see en CSS Media Queries , se renderiza a 375 x 667 y luego se escala con factor nativo (aquí 2.0) para que se ajuste a la pantalla del dispositivo (causa un efecto similar suavizado anti-alias entre esta operación).

Y ahora para simular la pantalla con 326 ppi para iPhone6s en mi iMac 27 "2012 con apparently 108.79 ppi (normalmente puede ser 96), tengo otra escala con factor de 108.79/326 Por lo tanto, el factor de escala final que aplicaríamos con transform:scale es:

with iframe of 375 x 667 pixels size
108.79/326 * 2.0 = 0.667 : as scale factor

asi que :

.iPhone6S {
/* this is the render are dimension */
/* media queries look up to this */
width:375px;
height:667px;
transform-origin: 0 0;
transform:scale(0.67);
/* you can calculate it by something like :
108/326*2 = 0.663 => 0.67*/
/* zoom:...; */ /* This is non-standard feature */
/* FireFox and Opera don''t support it */
}

<iframe src="https://www.w3schools.com/" class="iPhone6S"></iframe>

También desde w3.org en orientación

La característica de "orientación" de los medios es ''retrato'' cuando el valor de la función de medios de ''altura'' es mayor o igual que el valor de la función de medios de ''ancho''. De lo contrario, ''orientación'' es ''paisaje''.

Si estamos hablando de un simulador general, entonces debería considerar la detección de dispositivo de agente de usuario , que aún algunos sitios pueden usarlo en el lado del servidor o del cliente. Por lo tanto, deberá buscar la página manualmente usando XMLHTTPRequest y luego establecer user-agent con XMLHTTPRequest.setRequestHeader para que se XMLHTTPRequest.setRequestHeader a algún tipo de teléfono de dispositivo.

Here un ejemplo de cadena de agente de usuario de iPhone6s:

Mozilla / 5.0 (iPhone; CPU iPhone OS 6_1_3 como Mac OS X) AppleWebKit / 536.26 (KHTML, como Gecko) Versión / 6.0 Móvil / 10B329 Safari / 8536.25

También encontré este sitio que realmente vale la pena mencionar: https://www.mydevice.io/