Forza il livello di zoom/DPI-Scala con CSS, Header-Tag o JavaScript

Question

Abbiamo uno strano problema qui. Abbiamo un sito web che ha funzionato bene da alcuni anni. Un paio di mesi fa, Firefox ha iniziato a ridimensionare la pagina in base alle impostazioni DPI dell'utente sul suo sistema operativo.

Il problema è, per impostazione predefinita, la scala DPI è impostata su 125% (nel nostro paese) in Windows 7 e ogni visitatore che utilizza Firefox vede la pagina ridimensionata. Comunque, Internet Explorer e Safari ora fanno lo stesso, e credo che Chrome seguirà.

La parte difficile è: quando apro la pagina vedo il layout corretto. Se controllo il livello di zoom del browser, mi dice 100%: quando apro la stessa pagina con Firefox o Internet Explorer, tutto viene ridimensionato (ingrandito) del 25%. Se controllo il livello di zoom nelle impostazioni del browser, dice 100%. Se faccio lo zoom indietro due volte (all'80%) vedo il layout originale.

C'è un modo semplice per impostare il livello di scala/zoom dpi predefinito da CSS, JavaScript o forse un tag di intestazione?

Ecco alcuni screenshot per spiegare un po 'il mio problema.

Questo è il layout corretto utilizzato negli ultimi anni. La pagina è centrata e sul lato sinistro e destro è un po 'di sfondo

Su Firefox, IE e Safari la stessa pagina sullo stesso computer appare così. Viene ingrandito, non si vede lo sfondo e si vede un po 'meno del contenuto totale.

Quindi ora la mia domanda: cosa posso fare, per far apparire la stessa pagina allo stesso modo su diversi computer che vengono al ridimensionamento. So che molte cose differiscono sempre ma la scala dovrebbe essere la stessa.

Edit:

scala sempre la pagina con transform: scala (.75); transfor-origine: 100%; 0; non è sempre adatto, perché se un utente con l'impostazione del 100% DPI visita la pagina, tutto è minimizzato per lui. Non riesco sempre a ridimensionare la pagina. Devo in qualche modo identificare se l'utente ha impostato il suo sistema operativo su 100% o 125% di ridimensionamento DPI.

Edit:

sì, c'è un'opzione per determinare il fattore di scala impostato. Almeno per il mio setup funziona ora. Aggiungo uno screenshot con due browser aperto sulla stessa macchina (in alto a Chrome, Firefox basso) per vedere la differenza (e il problema che ha bisogno seriamente per ottenere fisso da qualcuno)

Answer 1

È possibile controllare il livello dpi browser con javascript e ingrandire il contenuto della pagina di conseguenza con i CSS (se necessario).

if(window.devicePixelRatio == 1) 
    $("body").addClass("zoom2x") 

Dove zoom2x è una classe CSS.

.zoom2x{ 
     zoom: 200%; /* all browsers */ 
    -moz-transform: scale(2); /* Firefox */ 
} 

Potrebbe essere un controllo incrociato i tuoi dpi attuali impostazione here e verificare i risultati.

Answer 2

Non sembra per essere una correzione di codice per questo, ma può essere risolto modificando le impostazioni del browser. Vedi link qui sotto:

https://support.mozilla.org/en-US/questions/962979 Stop Firefox DPI Scaling (when Windows setting is at 125%)