Меню моего сайта выглядит неправильно при просмотре на моем iPhone

Question

Когда я просматриваю www.americaspoeticsoul.com на моем iPhone, меню по какой-то причине переполняется. См:

И на других страницах это выглядит даже хуже всего из-за заголовка:

Кто-нибудь знает, почему это так? И есть ли способ это исправить? Вот CSS для меню:

/*Menu*/

#menu {
    margin-bottom:15px;
    width:450px;
}

#menu ul { /* remove bullets and list indents */
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    float:left;
}

#menu ul li a {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#D41C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a:hover {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a.current_link {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

Спасибо

Nathan

Answer 1

Как пользователь и разработчик iPhone - я бы не стал использовать такой телефон, как ваш, если бы мне действительно не пришлось - потребовались бы все виды увеличения, чтобы я мог прочитать или щелкнуть по нему. меню.

Если у вас есть контент, который вы хотели бы представить через меню на iPhone, я бы порекомендовал обнаруживать мобильные браузеры с небольшим экраном и, по крайней мере, перенаправлять их в меню для мобильных телефонов - jQuery Mobile - , поэтому простой в использовании для создания меню.

Это просто ответ об iPhone или экранах аналогичного размера - я уверен, что вы захотите исправить это на iPad, если он выглядит так же.

Answer 2

Вы не устанавливаете явную ширину для пунктов меню, которая оставляет их ширину на милость браузера и насколько велики размеры шрифта + поля и отступы.В случае мобильных браузеров (в том числе и для Android) ваша ширина слишком велика для тех 450 пикселей, которые у вас есть.Попробуйте сбросить размер шрифта на точку или еще что-нибудь.

Answer 3

Вы обнаруживаете один из недостатков использования текста / шрифтов в вашей системе меню. Существует слишком много вариантов (ОС, браузер, устройство и т. Д.), Чтобы ожидать, что текст всегда будет вести себя правильно, или даже использовать шрифт, который вы намеревались.

Я использую графически созданную систему меню, которая никогда не меняется, и простое текстовое меню в нижнем колонтитуле в качестве запасного варианта.

Answer 4

Вы можете попробовать добавить это в свой файл CSS:

html {-webkit-text-size-Adjust: нет; -ms-текст-размер-регулируйте: нет; }

Это остановит Mobile Safari (и Windows Phone) от регулировки размера текста в попытке сделать его более читабельным.

РЕДАКТИРОВАТЬ: Если вы хотите повлиять только на настройку размера текста на мобильных телефонах, вы можете использовать медиа-запрос:

@media screen and (max-device-width: 480px) {

  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

Если вы чувствуете себя амбициозно, вам следует рассмотреть возможность настройки макета на более фундаментальном уровне для экранов меньшего размера. Любой CSS, который вы вставите в этот медиа-запрос, будет применен к устройствам с размером экрана 480px или меньше.

Например, кнопки могут быть слишком маленькими, чтобы пальцы могли надёжно их нажимать. Лучшей альтернативой было бы линеаризовать макет, чтобы в нем был только один столбец, и каждая кнопка ссылки занимала всю ширину экрана.