Текст на телефоне меньше, чем на ноутбуке

Question

Меню на моем сайте отличается от моего телефона и отзывчивым видом в Firefox. В отзывчивом виде на моем компьютере с портом просмотра, сжатым для активного реагирующего дизайна, размеры шрифтов и других элементов верны. На моем телефоне меню крошечное.

Как это выглядит на моем компьютере, который правильно показан.

Как это выглядит на моем телефоне.

Мой 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 также работает, когда видовых меньше 1200px шириной

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

Answer 1

CSS не xx-large как измерения. Чем он игнорируется и возвращается к размеру шрифта браузера по умолчанию. Обычно в сети это 16px, но на мобильных устройствах оно может быть меньше.

Попробуйте это:

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

---

Примечание стороныvar() не поддерживается в IE.