come impostare la dimensione uguale dei caratteri nelle celle della tabella per le pagine html del dispositivo mobile

Question

Ho riscontrato un problema con il rendering dei caratteri sui dispositivi mobili. Ho una larghezza di tabella semplice fissata a 800 pixel, dimensione comune per i telefoni cellulari di oggi.

Il testo nelle mie celle utilizza sempre lo stesso trucco CSS css. Il testo nella prima riga mostra ok

Ma la riga successiva è un problema è divisa in due celle. La cella di sinistra è un'immagine e nella cella di destra c'è del testo. Il mio problema è che la maggior parte dei browser Web mobili ridimensiona la dimensione del carattere in quella cella.

Per me sarebbe corretto se quel testo fosse semplicemente distribuito su un po 'più di righe ma ciò non accade, tendono a mantenere tante linee simili a quelle di un browser desktop.

ho impostato la dimensione del carattere utilizzando pt px e nessun effetto nel file css come

.DefaultFont 
{ 
font-family: 'Merriweather Sans', Arial,verdena,sans-serif; 
font-size: 13pt; 
font-style: normal; 
color:#4e0203; 
font-weight: 400; 
} 

usato 13em 13pt e altri metodi ecc niente ha funzionato.

E per l'elemento html utilizzato span e div e p e provato nell'elemento td, ma ancora nessun effetto.

PS Non sto cercando trucchi javascript per ridimensionare le pagine lato client con rilevamento dispositivi ecc. Come faccio semplicemente a usare php per determinare se è un desktop o un dispositivo mobile (che richiede meno codice da trasmettere). Ho solo bisogno del codice in modo che il carattere non cambierà come causato da un browser web mobile.

Come posso impedire a quei client di ridimensionare parti di tabelle?

---

SOLUZIONE La soluzione finale che ha funzionato davvero bello era una combinazione di più persone qui.

• Set tavola Larghezza di in%
• dimensione indicate in carattere vw (che come% ha anche un indice 100), un valore basso come 2 circa.
• Nota vw è supportato da molto più della dimensione del carattere, anche delle immagini.
• includere il meta tag ha funzionato anche senza quello dopo, ma per essere al sicuro lo consiglio.

Answer 1

Forse si dovrebbe usare le unità tipografia viewport dimensioni per il font-size.

Può essere utilizzato quando si desidera dimensionare la cosa attraverso la larghezza o l'altezza del viewport (contenitore di elementi). O entrambi, del resto. I valori possibili sono:

vh - altezza del viewport
E dimensioni proportionaly all'altezza del contenitore.

font-size: 2vh; 

vw - larghezza del viewport
E dimensioni proportionaly alla larghezza del contenitore.

font-size: 2vw; 

Vmin - di finestra minima
E dimensioni proportionaly al più piccolo tra 'vh' e 'vw'.

font-size: 2vmin; 

Vmax - viewport di massima
E dimensioni proportionaly al maggiore tra 'vh' e 'vw'.

font-size: 2vmax; 

sicuramente può dare gli sguardi che si desidera. Trova il valore proporzionale attuale e, indipendentemente dalle dimensioni dello schermo, si adatterà!

W3 viewport relative length's docs

Answer 2

Hai provato Meta tag, per verificare se funziona ...

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Ciò significa che il browser (probabilmente) rendono la larghezza della pagina alla larghezza del proprio schermo. Quindi, se lo schermo è largo 320 px, la finestra del browser sarà larga 320 px, piuttosto che ingrandita e mostrerà 960px (o qualsiasi altra cosa che fa il dispositivo per impostazione predefinita, al posto di un meta tag reattivo).

Check out, Può essere utile ..

Answer 3

Penso che questo dovrebbe fare il trucco

-webkit-text-size-adjust: none; 

Answer 4

È possibile utilizzare window.innerHeight.