Text am Telefon kleiner als auf Laptop

Question

Das Menü auf meiner Website sind anders auf meinem Handy und responsive Ansicht in Firefox. In der reaktionsfähigen Ansicht auf meinem Computer mit dem geschrumpften View-Port, um das Responsive Design zu aktivieren, sind die Größen von Schriftarten und anderen Elementen korrekt. Auf meinem Handy ist die Speisekarte winzig.

Wie sieht es auf meinem Computer aus, der korrekt angezeigt wird.

Wie sieht es auf meinem Handy.

Meine CSS

#topMenu{ 
    background: var(--default-background); 
    box-sizing: border-box; 
    padding: 1rem; 
    padding-right: 3vw; 
    position: fixed; 
    top:0px; 
    right:0px; 
    left:0px; 
    z-index: 20; 
    height: var(--top-menu-height); 

} 
#topMenu #name{ 
    font-size: xx-large; 
} 

CSS ist geschützt auch ausgeführt, wenn die Ansichtsfenster kleiner als 1200px breit sind

#topMenu{ 
    background: rgb(252, 231, 194); 
    height: auto; 
    padding: 1em; 
} 
#topMenu #name{ 
    font-size: xx-large; 
} 

Answer 1

CSS nicht xx-large als Messung hat. Dann wird es ignoriert und auf die Standard-Browserschriftgröße zurückgesetzt. Normalerweise ist es im Web 16px, aber auf Mobilgeräten kann es kleiner sein.

Versuchen Sie folgendes:

#topMenu #name { 
    font-size: 16px; 
} 

---

Exkursvar() wird nicht in IE unterstützt.