iOS, отображающий неправильный размер текста

У меня проблемы с размерами текста на iOS Safari. Все тексты имеют одинаковый размер, но отображаются в разных размерах на iOS, но не на рабочем столе Chrome.iOS, отображающий неправильный размер текста

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=1024" /> 
     <style> 
      .content 
      { 
       width: 984px; 
       margin: 0px auto; 
      } 
      .left 
      { 
       float: left; 
       width: 165px; 
       border-right: 1px solid #e0e0e0; 
      } 
      .page 
      { 
       margin: 0px 0px 80px 180px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="content"> 
      <div> 
       <div class="left"> 
        <div class="portrait">TEST TEST TEST</div> 
       </div> 
       <div class="page"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum. 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

К сожалению, это не может быть показано в jsFiddle, так что вы должны сохранить это как HTML файл и открыть его в браузере Google Chrome. При использовании инструментов разработчика (F12) и перехода в режим устройства и изменения ширины устройства текст становится больше!

Нормальный размер

Normal size

Меньшие устройство ширина

Вы можете увидеть, что текст справа больше, чем слева. Это то, что вызывает мои проблемы.

Smaller device width

Как это можно исправить?

источник

2015-01-07 bytecode77

Ваш видовой экран вызывает проблему. Если вы измените его на следующее, он будет правильно масштабировать шрифты.

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

источник

2015-01-07 19:41:17

Нет, все тот же. – bytecode77

Вы пробовали задавать заданный размер шрифта? Не похоже, что какой-либо размер шрифта назначен. –

Да, я пробовал это. Этот код здесь - всего лишь минималистический пример веб-сайта, который я пытаюсь исправить. Я видел этот «-webkit-text-size-adjust-adjust» в другом месте и раньше пробовал, но он не работает. Попробуйте в Chrome и посмотрите. – bytecode77

Похоже, мета тег вызывает его. Есть ли причина, по которой вы установили <meta name="viewport" content="width=1024" />, а не width=device-width?

источник

2015-01-07 20:02:36 soba3

Да. Это потому, что я использую макет с фиксированной шириной 1024 пикселей, который также имеет центр. Это значит, что мобильное устройство «знает», какая предпочтительная ширина. – bytecode77

Необходимо указать размер шрифта для конкретного div. также добавьте медиа-запрос.

.content { ширина: 984px; margin: 0px auto; Размер шрифта: 13 пикселей;

 } 
     .left 
     { 
      float: left; 
      width: 165px; font-size:15px; 
      border-right: 1px solid #e0e0e0; 
     } 
     .page 
     { 
      margin: 0px 0px 80px 180px; font-size:13px; 
     }

источник

2015-01-08 11:42:55 anji

iOS, отображающий неправильный размер текста

ответ

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