Come posso ottenere un'interruzione di linea fluida sui browser mobili anche quando si esegue lo zoom?

Question

Come posso ottenere un'interruzione di linea fluida sui browser mobili anche quando si esegue lo zoom?

Ho una pagina Web molto semplice con una sola colonna di testo. Qui ci sono le parti pertinenti del CSS:

/* ✂---------------- */ 

body { 
    /* To avoid problems with some older browsers, that do not calculate 
    * relative values correctly without this statement. */ 
    font-size: 100%; 
    /* ✂---------------- */ 
    /* Center the content and leave a margin at the left and at the right. */ 
    margin-left: auto; 
    margin-right: auto; 
    /* ✂---------------- */ 
} 

/* ✂---------------- */ 

@media not print { 
    body { 
     /* ✂---------------- */ 
     /* Do not put too many words in a single line: */ 
     width: 41em; 
     /* Avoid horizontal scrolling, and leave a small margi 
     * at the left and at the right. */ 
     max-width: 90%; 
    } 

    /* ✂---------------- */ 

} 

/* ✂---------------- */ 

L'obiettivo è:

1. Non utilizzare le dimensioni dei caratteri fissi, ma rispettare la dimensione del font di default che l'utente ha scelto nelle impostazioni del proprio browser

2. Se la larghezza della finestra del browser è molto grande, non rendere le linee troppo larghe (troppi caratteri). Invece, lascia spazio a sinistra e a destra.

3. Se la larghezza della finestra del browser è ridotta (= spazio insufficiente per mostrare 41em di testo nella dimensione del carattere corrente al livello di zoom corrente), quindi utilizzare un'interruzione di riga esattamente per l'intera larghezza della finestra del browser (con un piccolo margine di (100% -90%) ÷ 2 = 5% a sinistra e a destra), evitando lo scorrimento orizzontale.

4. Se l'utente esegue lo zoom avanti o lo zoom indietro, l'interruzione di riga viene adattata correttamente. Pertanto, anche quando l'utente esegue lo zoom in modo eccessivo, non è necessario lo scorrimento orizzontale perché la lunghezza della linea non è più ampia della finestra del browser.

Questo funziona perfettamente sui browser desktop. Ma i browser mobili giacciono sul panorama. Sostengono di avere un viewport di circa ottocento pixel invece della reale larghezza della finestra del browser (questa è la "finestra di layout" - diversa dalla vera "vista visiva" - vedi http://www.quirksmode.org/mobile/viewports2.html per i dettagli). Così, per i browser mobili, ho aggiunto <"viewport" content="width=device-width, initial-scale=1"/> nel codice HTML e

@viewport { 
    /* 100% of viewport’s width */ 
    width: 100vw; 
    zoom: 1.0; 
} 

nel CSS. Ora, gli obiettivi n. 1, 2 e 3 funzionano anche su Firefox Mobile. Ma l'obiettivo n. 4 no. L'interruzione di riga non cambia sul recente Firefox Mobile durante l'ingrandimento o lo zoom. (Fatto curioso: sul mio vecchio browser standard Android 2.3.6, funziona.) Suppongo che la larghezza della vista del layout sui browser mobili sia determinata una volta che il tag <meta> è stato letto e la larghezza del pixel CSS della finestra di layout non cambia più quando l'utente ingrandisce o ingrandisce (in contrasto con i browser desktop, che adottano il loro viewport durante lo zoom). Poiché lo max-width: 90%; è relativo al viewport (poiché questo è il contenitore circostante), l'interruzione di riga non cambia più quando si effettua lo zoom in avvicinamento o lo zoom. Prova a http://ryanve.com/lab/dimensions/ che visualizza alcuni valori DOM utilizzando JavaScript. Quando si esegue questo sito su un browser desktop, si vede che window.innerWidth cambia quando si ingrandisce o quando si riduce lo zoom. Se si esegue la stessa operazione sui browser per dispositivi mobili, il valore di window.innerWidth non cambia durante l'ingrandimento o la riduzione. Per quanto vedo, questo comportamento sembra essere anche il comportamento standard sui moderni browser mobili e le pagine Web mobili in generale. Questa sembra essere una scelta deliberata degli sviluppatori dei brower mobili (vogliono essere in grado di mostrare anche vecchie pagine web non responsive ottimizzate per il desktop), ma il lato negativo è che si può lavorare solo con la finestra di layout virtuale ”.

E per quanto ne so, non ci sono unità di misura nel CSS che sono relative alla reale dimensione della "visualizzazione visiva" invece della "vista di layout" virtuale.

Quindi le mie domande sono:

1. Mi chiedo se c'è qualche pulito e standard di conformarsi possibilità a tutti per una pagina web per ottenere questo (zoom + interruzione di linea del fluido) a lavorare su browser per dispositivi mobili proprio come sulla versione desktop?

2. Se esiste una tale possibilità, in che modo esattamente potrebbe funzionare (preferibile senza JavaScript)? È l'unica possibilità di un attacco sporco che stima il fattore di zoom (che per quanto ne so non è accessibile da browser cross-browser in JS) sui browser mobili calcolando "larghezza vista visuale" ÷ "larghezza schermo" e adotta la viewport di conseguenza?

Answer 1

Prova questa CSS:

body { 
    max-width: 41em; /* up to 41em in width */ 
    width: 100%;  /* set width to 100% up to 41em */ 
    margin: 0 auto; /* center it */ 
} 

Questo dovrebbe evitare che il body più largo 41em, ma tenerlo in 100% il resto del tempo. Dovrebbe anche centrarlo.

Vedere this example su JSFiddle.net.

Screenshots:

più ampia rispetto max-width:

Meno di max-width:

Answer 2

Risposta breve: Non è possibile. (Ma c'è una soluzione.)

Risposta lunga:

A quanto pare non è possibile avere il ridimensionamento dinamico della finestra di layout su browser per dispositivi mobili.

Quirksmode fornisce un'introduzione alle diverse finestre (finestra di layout vs. finestra visiva): http://www.quirksmode.org/mobile/viewports.html http://www.quirksmode.org/mobile/viewports2.html

Sembra essere una scelta deliberata dei browser mobili non adattare la dimensione finestra di layout in zoom.

Ci sono alcuni sforzi per portare lo zoom e la finestra gestione di CSS (sostituendo il brutto Meta-Finestra-tag in HTML):

https://drafts.csswg.org/css-device-adapt/#zoom-desc http://www.quirksmode.org/blog/archives/2015/09/a_new_device_ad.html

Ma anche quando questo sarebbe stato attuato dai browser , non darebbe ancora il controllo su cosa succede alle dimensioni della finestra di layout durante lo zoom.

Soluzione alternativa: creare due pulsanti o collegamenti denominati "più grande" e "più piccolo" nella pagina Web. Usali per chiamare un JavaScript (ECMAScript) e cambiare la dimensione del testo. Caso più semplice: la dimensione di tutto il contenuto è relativa alla dimensione del carattere dell'elemento <body>; se è così, devi solo cambiare questa dimensione del carattere.Codice:

<!-- The CSS is assumed to apply “display=none” to the elements 
with class="no-print" when used for printing. --> 
<p class="no-print"> 
    <!-- Some text size tools. 
    The CSS is assumed to apply “display=none” to the elements 
    with id="textSizeTools". So the text size tools are 
    by default invisible and do not take any space in the default 
    rendering. --> 
    <span id="textSizeTools"> 
    <span class="linkStyle zoomInCursor" onclick="javascript:resizeText(true)"> 
     [größer] 
    </span> 
    – 
    <span class="linkStyle zoomOutCursor" onclick="javascript:resizeText(false)"> 
     [kleiner] 
    </span> 
    </span> 
</p> 
<script> 
    /* document.body.style.fontSize is empty – though “font-size=100%” is set in 
    * the CSS. We initialize it here with the value "100%", that 
    * corresponds to our CSS entry . From 
    * now on, the value is available in ECMAScript. */ 
    document.body.style.fontSize = "100%"; 
    var resizeText = (function() { 
     'use strict'; 
     var step = 0; 
     return function (bigger) { 
      if (bigger !== true) { 
       step -= 1; 
      } else { 
       step += 1; 
      } 
      document.body.style.fontSize = 100 * Math.pow(1.2, step) + "%"; 
     }; 
    }()); 
    /* If the browser is scripting-enabled, than this script will be executed 
    * and the text size tools will become visible. If the browser is not scripting-enabled, 
    * than this script will not be executed and the text size tools will stay hidden. 
    * This is intentional, because without scripting, the text size tools would not 
    * work, and it is not good if the user can see buttons and links that 
    * do not work. The same is if this script does not work because some 
    * of the commands do not work in the current browser: The script cannot 
    * be executed until here, so the text size tools will not be made 
    * visible. */ 
    document.getElementById("textSizeTools").style.display = 'initial'; 
</script>