2015-02-04 3 views
0

Я сделал это правильно в прошлом, но что-то на этом новом месте, я в здании не правильно пинать в.Em Размер шрифта не расширение масштабов в прошивкой

Моя проблема заключается в том, что когда сайт рассматривается в iPhone (5, это то, что я имею в наличии для проверки) портретный режим, размеры шрифта остаются очень маленькими. Они не увеличиваются по сравнению с размерами em. Он работает правильно, когда я сжимаю мой настольный браузер (пример ниже, слева), но на iPhone тип остается маленьким.

Живой сайт: http://debbiemillman.com/designmatters/totest/index.html

Живая CSS: http://debbiemillman.com/designmatters/totest/_css/style.css

У меня есть -webkit-текст-размер-регулировки: 100% там тоже.

Любые идеи, что я делаю неправильно?

enter image description here

ответ

1

Попробуйте изменить вам вьюпорт мета-тег, который вы в настоящее время есть в <meta name="viewport" content="width=1080" /> на следующее:

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

Я думаю, что должен исправить этот вопрос; это обычная комбинация настроек для использования с iPhone и другими.

+0

Yup, это исправлено. Благодаря! – Armin

+0

Может выглядеть лучше, я старый и нуждаюсь в больших шрифтах. См. Новый снимок экрана WinPhone. – Misunderstood

0

Есть несколько вещей, чтобы рассмотреть.
У вас есть h3 конфликты css в html.css style.css и reset.css.

reset.css line 20 указывает 100%.
reset.css строка 70 определяет 13px.
html.css строка 180 указывает 1.17em.
В FireFox преобладающая строка style.css 54 указывает 2em.

Укажите CSS один раз. Не используйте h3, а скорее
<p class="headline">
как заголовки Таблица стилей браузера не всегда легко переопределить. Теги абзаца меняются.

Если вы используете идентификатор, а не класс, ему будет присвоен более высокий приоритет и, возможно, более согласованный во всех браузерах.

Не знаете, почему, но FireFox показывает, что reset.css загружается дважды.

Посмотрите на водопад временной шкалы, у вас есть некоторые файлы шрифтов, которые загружаются очень поздно и удерживают кнопку «Начать рендеринг». Все файлы CSS и шрифтов должны быть загружены перед любым JS, поскольку браузер должен анализировать JS по мере его загрузки, а затем должен сбрасывать предварительный макет при каждом новом загрузке CSS или шрифтов.

Линии уведомления 18-23, а затем сразу после заполнения 23 содержимого DOM.

WebPageTest Waterfall

Другой любопытный вещь относительно небольшие файлы изображений принимают за одну секунду, чтобы загрузить. Это особенно странно, когда скорость передачи данных на вашем сервере очень быстро. И ошибки 404 в jquery и script.js не очень хорошие.

Base Page Size: 20,029 Bytes 
Transmission Speed: 11,506,849 Bytes/Sec. 
Compression: 7.9X 
HTML Whitespace: 37.3% 
Bytes Transmitted: 2,520 Bytes 
HTML Transfer Rate: 91,456,621 Bytes/Sec. 

Вот как это выглядит на WP 8.1. Не совсем, когда это реальный размер, его очень трудно читать. Отсутствие высокой контрастности не помогает.

Win8.1 Phone

enter image description here

+0

Я также вижу странное поведение между шириной 569px и 57px. В 569 все изображения находятся в одном столбце. На 570 они составляют 3 строки и 4 столбца. Затем около 550 пикселей шириной 2 колонки и 6 рядов. Затем примерно на 320 пикселей он возвращается к 3 строкам 4 столбца. – Misunderstood

+0

Не мобильная страница. Ran 3 тесты здесь 3 ссылки. Очень плохо. http://gtmetrix.com/reports/debbiemillman.com/y712mRtJ и https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fdebbiemillman.com%2Fdesignmatters%2Ftotest%2Findex .html и http://validator.w3.org/mobile/check?task=2015020500382517.mobile2&docAddr=http%3A%2F%2Fdebbiemillman.com%2Fdesignmatters%2Ftotest%2Findex.html – Misunderstood

+0

Спасибо за отзыв. – Armin

Смежные вопросы