2015-04-17 3 views
2

У меня есть HTML ниже (также в this fiddle). Когда я просматриваю это в Chrome на своем Android-устройстве, все выглядит отлично.Основа CSS размер шрифта вопрос (Chrome на Android)

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet" /> 
 
<h1>This is a header</h1> 
 

 
<div class="row"> 
 
    <div class="column"> 
 
    <p>Text</p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="column"> 
 
    <div class="panel"> 
 
     <p>Some long text.</p> 
 
     <hr /> 
 
     <p>Some long text.</p> 
 
     <p>Some long text.</p> 
 
    </div> 
 
    </div> 
 
</div>

Однако, когда я настроить «длинный текст» пункты на самом деле содержат большое абзац текста (как в приведенном ниже фрагменте кода, и this fiddle), то изменение размера шрифта в по какой-то причине абзац становится больше.

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet" /> 
 
<h1>This is a header</h1> 
 

 
<div class="row"> 
 
    <div class="column"> 
 
    <p>Text</p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="column"> 
 
    <div class="panel"> 
 
     <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p> 
 
     <hr /> 
 
     <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p> 
 
     <p>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.</p> 
 
    </div> 
 
    </div> 
 
</div>

Это только кажется, что происходит в Chrome на Android (насколько я могу сказать). Может ли кто-нибудь сказать мне, почему это происходит? Это ошибка в Chrome, или я что-то пропустил?

+0

Это похоже на меня. – Joshua

+0

@ Джошуа, ты проверил скрипки? Как ни странно, когда я просматриваю фрагменты кода SE (используя Chrome на Android), они выглядят одинаково. Скрипки этого не делают, хотя это тот же HTML. – FixMaker

+0

для меня единственная разница в хром между кусочками кода - это количество «Некоторый длинный текст». Кроме того, для меня все одинаково. – Joshua

ответ

0

Эта проблема вызвана тем, что Chrome для Android реализует «повышение шрифта» (это может относиться к браузерам webkit в целом, но я не испытывал проблемы где-либо еще).

В принципе, чтобы попытаться повысить удобочитаемость веб-страниц в мобильном браузере, Chrome автоматически увеличит размер шрифта абзаца (так что пользователю не нужно увеличивать его, чтобы его прочитать) , Однако это применяется только к параграфам определенной длины, в результате чего более длинные абзацы отображаются в гораздо большем размере шрифта в их контексте.

Это не может быть отключено в Chrome. Однако есть несколько возможных исправлений (обсуждаемых в this SO question), которые могут быть применены, что не позволит ему «увеличить» размер шрифта. Они обычно сводятся к:

1. Явным образом укажите размеры высоты элемента <p>.

Это может быть сделано путем применения max-height: 999999px или min-height: 1px к абзацу. Однако, как сообщается, это вызывает проблемы масштабирования в некоторых браузерах (например, Safari).

2. Явно укажите размеры рамки просмотра.

Добавление следующего тега в разделе <head> делает это:

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

Это отключает шрифт форсированных и исправляет эту проблему в оригинальном вопросе.

+0

Вы пробовали html * {max-height: 1000000px;}? не на теге p, но с этим селектором, html * –

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