2013-08-09 1 views
0

Я не веб-разработчик. Я начинаю разработку игр. Я делаю сайт this, чтобы показать свое портфолио.firefox and chrome on android, инфляция на одном p, а не другое

Я думаю, что он выглядит хорошо во всех браузерах, которые я пробовал. Это должно выглядеть так: what it should look like

Но в chrome и firefox на android блок текста в правом верхнем углу отображается в массивном шрифте размера, который делает этот div огромным и отталкивает все.

how it looks on android

Теперь Первоначально был HTML файл с Главной картой сайтом + этим пунктом, и отдельными битами о моих проектах, например, «артефакт», была Seperate страницы загружается в IFRAME.

Я заметил, что нижний абзац в iframe был хорош, хотя div является тем же классом, что и проблема, описанная выше.

Вот что Ive пытался до сих пор ..

Я сделал, что р новый класс и определить его размер текста явно
я поставил весь сайт в другом IFRAME. странно не сделал никакой разницы
я положил, что параграф в литии в ул
я поставил весь текст в этом пункте в промежутке
Я изменил текст от ар к h7

андроида браузер по-прежнему набирает на нем и делает текст огромным, а не тем ниже.
В firefox кажется, что это вызвано «инфляцией шрифта», и я могу обойти его, изменив настройки firefoxes. Но почему это только раздувает один абзац и игнорирует другого?

Обратите внимание. Я сделал все на этом сайте в пикселях, а не в% или em. Если я могу просто получить андроид, чтобы не взорвать этот абзац, все будет хорошо.

ответ

1

я действительно обнаружил хорошее решение этой проблемы .. Добавить эту строку в CSS ..

HTML * {макс-высота: 1000000px;}

фиксирует его на хром и светлячок на андроид так или иначе.

Вы можете прочитать больше об этом here. Обнаруженный его на this stackoverflow question

1

У нас есть идея под названием Font Boosting, она предназначена для того, чтобы сделать текст, который трудно читать на мобильном устройстве, более читабельным. Вы не можете обойти это, кроме как создать мобильный оптимизированный сайт, включив метатег мобильного просмотра <meta name="viewport" content="width=device-width">, это отключит увеличение шрифта, но это будет означать, что ширина экрана измеряется в пикселях CSS примерно на 480 пикселей на Nexus4.