Simulare lo schermo ad alta risoluzione in Chrome?

5

Come posso visualizzare un sito Web wide-screen su uno schermo XGA ( 1024px) in Chrome 26 su Windows XP. Certo, posso eseguire lo zoom indietro in Chrome, ma poi la < 1220pxquery multimediale si attiva, purtroppo! Quindi non ottengo la >= 1220pxversione del sito web.

Cosa posso fare?

Con Firefox funziona: zoom indietro, quindi la >= 1220pxquery multimediale si attiva, fantastico! Ma non è Chrome, su cui voglio testare anche il sito web.

Codice sorgente per la pagina Web di prova:

<!DOCTYPE html>

<html>
  <head>
    <meta charset=utf-8>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="index.css">
    <style>
      p {
          color: black;
      }

      @media (min-width: 1220px) {
          p {
              color: red;
          }
      }
    </style>
    <script>
      window.addEventListener("resize", function () {
          console.log(window.innerWidth);
      });
    </script>
  </head>

  <body>
    <p>Turns red for window width >= 1220px</p>
  </body>
</html>

— feklee
fonte

Che tipo di scheda grafica hai? A seconda di ciò, potresti aggiungere una risoluzione dello schermo personalizzata superiore a 1220 pixel di larghezza (non la soluzione più elegante, lo so, ma può essere utile per testare molte cose)

— Marcus Chan,

@MarcusChan, sì, lo so che posso farlo. Ma voglio una soluzione in cui posso rimanere alla risoluzione XGA, perché non mi piace una schermata di scorrimento.

— febbraio

1

Hmm. C'è un'estensione di Chrome ( chrome.google.com/webstore/detail/resolution-test/… ) che può cambiare il browser in modo che sia più grande del tuo schermo, ma non è neanche ottimale ...

— Marcus Chan,

@MarcusChan: Grazie, l'estensione è meglio di niente! Scrivilo come una risposta e lo segnerò come accettato, fino a quando qualcuno non troverà una soluzione migliore (zoom).

— febbraio

7

Per completezza, voglio menzionare che utilizzando gli strumenti per sviluppatori di Chrome, le metriche del dispositivo possono essere ignorate specificando una risoluzione dello schermo esatta. Nella schermata, è selezionata un'opzione aggiuntiva: Adatta alla finestra

Almeno con Chrome 26, tuttavia, la modifica delle metriche del dispositivo non influisce (più?) Sulle query multimediali. Quindi, al momento della stesura di questo, questa non è una soluzione.

Immagine dello schermo

— feklee
fonte

1

Le query multimediali sembrano funzionare in Google Chrome 27 utilizzando questa opzione

— Paul van Schayck,

1

NOTA: la scheda "Sostituzioni" è stata rinominata "Emulazione". Menu a sinistra, fai clic su "Schermo". Seleziona "Emula schermo" e inserisci la risoluzione desiderata. Deseleziona "Riduci per adattarlo" (a meno che tu non voglia vedere la finestra più grande ridotta nelle dimensioni della finestra corrente, per vedere il risultato complessivo). SBLOCCA le impostazioni dello sviluppatore, quindi è una finestra separata, che non utilizza parte dell'altezza della finestra.

— ToolmakerSteve

L'aspetto negativo di deselezionare "Riduci per adattarsi" è che non sembra esserci alcun modo per scorrere all'interno della finestra più grande; mostra solo il centro della finestra del browser sovradimensionata.

— ToolmakerSteve

2

Una soluzione è un'estensione di Chrome ( https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal ) che può modificare la risoluzione della finestra del browser in modo che sia più grande della risoluzione dello schermo.

— Marcus Chan
fonte

Questo è il trucco. Vorrei comunque avere la possibilità di ridurre come in Firefox.

— febbraio

that can change your browser window resolution to be larger than your screen resolution- sbagliato, JavaScript non può modificare le dimensioni di Windows più grandi dello schermo se questo non è supportato dal sistema operativo (il mio caso), quindi nessuna estensione può farlo.

— Tony Bogdanov,

@Tony Dai un'occhiata al codice di esempio che ho appena aggiunto alla mia domanda. window.innerWidthcambia quando eseguo lo zoom indietro, ma la media query si attiva solo quando cambio la dimensione fisica della finestra. È interessante notare che il plug-in raccomandato da @MarcusChan non funziona più per me.

— feklee,

@MarcusChan - sul mio PC, l'estensione Chrome non aiuta: ho aggiunto una dimensione dello schermo maggiore e Risoluzione test dice che ha impostato la finestra su quella dimensione, ma il risultato non è ancora più grande dello schermo (Windows 7 64 -bit; NVidia GTX 680 w 4 GB).

— ToolmakerSteve

1

Con Chrome 28, quando si riduce sufficientemente lo zoom, alla fine viene generata la query multimediale per uno schermo più grande. Problema risolto.

— feklee
fonte