¿Cuál es la mejor manera de probar una página web con una resolución más alta que las resoluciones de su pantalla actual?

10

Estoy creando un sitio web receptivo donde necesito probar el renderizado css, html, javascript de mi página web con una resolución de 2400px, mientras que mi pantalla es de 1900px.

windows display resolution website engranaje de metal sólido
fuente
posible duplicado de ¿Cómo puede tomar una captura de pantalla de una página web completa?
Ƭᴇcʜιᴇ007
¿Se da cuenta de que puede cambiar el tamaño de las ventanas del navegador más allá de la resolución de su pantalla en la mayoría de los sistemas? Simplemente muévalos hasta la mitad de la pantalla y luego cambie el tamaño del borde que ahora está en el medio de la pantalla. Es inútil para el uso real, pero será suficiente para las pruebas. Esta captura de pantalla de la ventana completa se tomó en OS X con una resolución de pantalla de 1680x150.
Daniel Beck
@DanielBeck - extraño estoy intentando lo mismo en mi Chomre (Windows) pero no se extiende más allá de mi pantalla actual
equipo de metal sólido
Es realmente un problema con su sistema operativo que intenta burlarlo entonces . Podría reproducirse con Safari en Windows 7.
Daniel Beck
El mío también es Windows 7
equipo de metal sólido el

Respuestas:

3

En el navegador Chrome:

  1. Presione F12. Esto abrirá DevTools.

  2. Haga clic en un icono de configuración en la esquina inferior derecha. Esto abrirá la configuración de DevTools.

  3. Vaya a Anulaciones en el menú de la izquierda.

  4. Marque Habilitar y Métricas del dispositivo.

  5. Escriba la resolución de la pantalla

Siempre lo uso, es realmente conveniente.

Arman Bimatov
fuente
2

Si presiona Ctrl+ Shift+ Men las versiones recientes de Firefox, ingresará a la Vista de diseño receptivo , que puede cambiar el tamaño de la ventana del navegador para que sea más grande que el tamaño real de la pantalla. También puede tomar capturas de pantalla y simular eventos táctiles desde FF 26 en adelante.

Captura de pantalla de RDV
Haga clic para tamaño completo

Es posible que le resulte más fácil cambiar el tamaño después de hacer la ventana más pequeña: puede arrastrar los dimensionadores más lejos de una sola vez. O simplemente ingrese un preajuste personalizado del menú desplegable.

Beto
fuente
¿Hay una API para esta opción? ¿Para habilitarlo a través del código js inyectado desde el sitio web o desde un complemento?
Kamal Reddy
@KamalReddy No creo que pueda hacerlo desde el contexto de contenido (sitio web), pero debería ser posible desde el contexto de Chrome (complemento). Bueno, en el futuro de todos modos. ¿Quizás puedas simular Ctrl + Shift + M?
Bob
1

Puede probar este sitio web que le permite probar su página web con cualquier resolución de pantalla que le permita elegir entre una resolución predeterminada o ingresar su resolución personalizada. Espero que encuentres estas líneas útiles.

kamalam
fuente
Ser bloqueado por nuestro servidor proxy. ¿Es eso un puntero a otro sitio, o esa página PHP es la página real de la herramienta?
Luke canadiense
la página PHP que he agregado aquí es la página real de la herramienta
kamalam
0

Esta pregunta probablemente sea más adecuada para los webmasters, pero le daré una puñalada y sugeriré ViewLikeUs que

le permite ver cómo se ve su sitio web en los formatos de resolución más populares.

CharlieRB
fuente
1
solo tiene 1920 max
metal gear solid
0

Agregue una resolución de pantalla personalizada en el panel de control de su tarjeta de video.

GENEBEN
fuente
3
¿Resoluciones mayores que las admitidas por la pantalla? ¿Podría proporcionar más detalles sobre cómo configurar esto y cómo se ve?
Daniel Beck
@DanielBeck Este enlace tutorial de YouTube es para tarjetas nVidia. Bastante similar para ATI / AMD.
GENiEBEN
2
@ElGenieben Ese video advierte explícitamente a las 0:39 que podría dañar su pantalla al configurar una resolución que sea demasiado alta.
Nicole Hamilton
0

Simplemente cambie el zoom en su navegador, cuando se aleja, esencialmente el tamaño de su ventana informa un ancho cada vez mayor a su aplicación.

ejemplo jsfiddle aquí , solo haga clic en el botón, vea el ancho que informa, luego aleje un poco y haga clic en el mismo botón: informará un tamaño más grande.

Doobeh
fuente
0

Pruebe la configuración de resolución personalizada en el emulador de dispositivo en Google Chrome. Le da más control que usar la funcionalidad de zoom del navegador.

Habilite el emulador de dispositivo y marque la opción 'acercar para ajustar'

Ingrese manualmente resoluciones de hasta 9999 px de ancho (o arrastre los bordes de la pantalla emulada. La resolución emulada se ajustará a su propia ventana gráfica.

En realidad, puede mantener baja la altura de resolución, ya que podrá desplazarse hacia abajo de todos modos. De esta manera también puede mantener abierto el inspector. ¡Un gran flujo de trabajo para el desarrollo web!

bramchi
fuente