HTML/CSS: dimensione del carattere della tabella diversa nel dispositivo mobile

Mi piacerebbe avere un sito Web semplice che funzioni sia su browser desktop e mobile, e abbia riscontrato un problema strano (rookie): quando ho un tavolo i cui testi di colonna sono di di lunghezza diversa, le dimensioni dei caratteri renderizzate nel dispositivo mobile sono notevolmente diverse. Qualche idea sul perché questo sta accadendo e quale è una soluzione rapida e pulita? Grazie in anticipo per il vostro aiuto!HTML/CSS: dimensione del carattere della tabella diversa nel dispositivo mobile

Il codice HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    body { 
     font-family: Verdana, Geneva, Arial, sans-serif; 
     font-size: medium; 
    } 
    table, td { 
     border: 1px solid black; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td>Short text. Short text</td> 
     <td>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. </td> 
     </tr> 
    </table> 
    </body> 
</html>

Renders bene su browser desktop

desktop

Strano dimensione del carattere sul browser mobile (cromo emulatore)

mobile

fonte

2014-11-22 Ying Xiong

Cosa emulatore ti riferisci? Questo sembra essere un bug nell'emulatore piuttosto che qualsiasi altra cosa. –

Stavo usando l'emulatore mobile di Google Chrome, e no, non è un bug --- Ho visto lo stesso effetto di rendering sul mio smartphone (ed è per questo che ho deciso di ripararlo). –

Hai ragione, questa stranezza si verifica effettivamente in Chrome su Android (e il tag 'meta' suggerito in una risposta risolve questo problema). –

È necessario considerare s la visualizzazione della vista della vostra applicazione. Per creare un'applicazione web ottimizzata per i dispositivi mobili, potrebbe essere necessario impostarla nelle intestazioni. Puoi farlo aggiungendo un tag <meta> tra i tuoi tag <head>. Ecco un esempio:

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

Per una descrizione completa di ciò che una finestra è e come viene utilizzato, si può visitare l'articolo Configuring the Viewport da Apple Developer come è stato introdotto per Safari Mobile.

fonte

2014-11-22 05:23:17

Grazie a @Abel, ma cambiare la dimensione del font non risolve il mio problema --- l'emulatore ha ancora dimensioni di carattere diverse su due colonne. –

@YingXiong dai un'occhiata alla mia risposta modificata se funziona per te –

Sì, il tag '' corregge il rendering. Se potessi gentilmente aggiungere qualche altra spiegazione su quel tag, lo apprezzerei davvero! –

provare questo

body { 
    font-family: Verdana, Geneva, Arial, sans-serif; 
    font-size: 15px; 
}

fonte

2014-11-22 07:34:18

Grazie, @Reza, ma l'impostazione della dimensione del carattere non risolve il mio problema. –

HTML/CSS: dimensione del carattere della tabella diversa nel dispositivo mobile

risposta

Problemi correlati