CSS Размер шрифта не работает должным образом на мобильном устройстве

Я работаю над небольшим проектом для школы, где мы должны включить html5 и css3. Это сейчас на начальном этапе, поскольку я пытаюсь создать два отдельных css файла для мобильных и настольных версий.

Для мобильной версии я пытаюсь заставить меню просто показать список, но с большим шрифтом. Я никоим образом не могу заставить эту работу работать.

Это css для меню:

nav ul {
    list-style: none;
    background-color: green;
    padding: 0;
}

nav li {
    border-bottom: 1px solid black;
    padding: 5px;
}

nav {
    margin-top: -36px;
    width: 100%
}

nav h1{
    margin: 0;
}

Это создает на моем рабочем столе И на моем iPhone

Размер шрифта установлен в 1em в HTML в верхней части файла. Но 1em недостаточно для мобильных устройств, поэтому я хочу, чтобы он был больше, что кажется невозможным.

Даже если я даю nav h1 размер шрифта 10em, он не будет больше этого:

Пока на моем рабочем столе он работает без проблем, он выглядит так:

То же самое происходит при попытке сделать "сообщения в блоге" больше, они просто не сделают этого.

У меня обычно нет проблем с работой с CSS, но на этот раз я не могу понять. Надеюсь, кто-нибудь может помочь! Я чувствую, что это что-то очень очевидное.

Вот полный CSS: http://snipt.org/zLic5

Вот html: http://snipt.org/zLid2

Ответ 1

Я видел ваш html-код. вы не добавляете метатег. определенные метатеги необходимы, когда вы разрабатываете мобильный сайт,

например, вы должны добавить -

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>Welcome to your school name</title>

<!-- smart phone css  -->
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />

<!-- Tablet -->
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />

<!-- Desktop -->
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">

Ответ 2

Я вижу пару вещей, которые, как я думаю, могут помочь вашей ситуации. Семантически, вы не хотите использовать теги <h1> в своем списке меню вообще. Удалите эти теги и примените стиль к стилю nav li css и соответствующим образом настройте дополнение. Кроме того, только рекомендация, но я слышал с нескольких сайтов, что идеальный размер мобильных шрифтов pt.

Надеюсь, это поможет.

Ответ 3

Вернитесь к использованию ли для вас навигации.

Затем установите размер шрифта на что-то приемлемое (14px или 16px).

Затем в вашем css используйте медиа-запросы.

@media (max-width: 480px) { // will only happen on viewport less then 480 pixels (mobile)
  li {
    font-size:18px; // larger font (or whatever you want to do
    padding: 20px; // can even increase your padding
  }
}

Ответ 4

Попробуйте свойство css text-size-adjust для масштабирования текста на мобильных устройствах. Что-то вроде:

nav {
    text-size-adjust: 200%;
}
nav ul {
    text-size-adjust: 300%;
}
nav h1 {
    text-size-adjust: 400%;
}