Разница в размерах шрифта на планшетах и ​​телефонах

Question

Надеюсь, вы сможете помочь мне в этом, так как я разорву свои волосы ... У меня есть небольшое шатер на основе этого кода: http://jsfiddle.net/TCJT4/525 что подает текст.

Вот как это выглядит на IPad 6 ... и игнорируйте от эскизного проекта, но это, как это должно выглядеть:

Вот как это выглядит на iPhone 4S:

Тикер извлекается из одного и того же источника, но, как вы можете видеть, текст больше на iPhone (изображение iPad увеличено, поэтому оно кажется большим, но на самом деле они отображают 320x30 пикселей. Текст временно жестко закодирован t o 20px в высоту, и я тоже пытался использовать другие устройства ... баннер по-прежнему выглядит по-разному на устройствах.

Я выполнил некоторую отладку контейнера/заполнителя тикера, а также обнаруженную высоту баннера и отключил все элементы, изменяющие текст. Вот результат некоторых свойств:

iPad 6: Tickerplaceholder DIV-height: 24pixels, bannerheight: 30px, pixelaspect-ratio: 2 
iPhone: Tickerplaceholder DIV-height: 32pixels, bannerheight: 30px, pixelaspect-ratio: 2 
PC (Chrome): Tickerplaceholder DIV-height: 24pixels, bannerheight: 30px, pixelaspect-ratio: 1; 

Я нахожу это очень странным, что два retinadisplay устройства отображения и тот же баннер по-разному - и что IPad и PC отображает их правильно.

Тикер также можно найти здесь, в своей последней форме: www.videobanner.dk/ph.html

Answer 1

Причина этой проблемы связана с причудой или ошибками в IOS Safari, который возвратил неправильную и непредсказуемую высоту при работе с неупорядоченными списками, содержащего текст различной длиной. Это стало очевидным, когда я сравнивал разные текстовые длины на разных платформах. Нет исправления не было найдено, но я был в состоянии обойти эту проблему путем разделения одной строки на несколько коротких строк, таких как

<li>This is a text that </li><li>doesn't go well with iOS</li> 

В моем проекте, это решение также работает ... возможно, не так красиво, хотя.

Answer 2

Пиксели различных физических размеров на разных устройствах - так 24px меньше на одном устройстве, чем на другой.

Для текста, если вы используете точки вместо этого, размер будет одинаковым для всех устройств - все они сделают 72pt 1 дюйм (около того).

Конечно, это означает, что вы должны использовать текст, а не растровые изображения и т.д.

Мобильные устройства также могут иметь уровень масштабирования набор для удобства чтения (пользователем), который также влияет на размер - например, указать 24pt или px, а браузер составляет 36pt или px - расчетный размер в инспекторе будет отличаться от стилизованного размера - чтобы обойти это, вам нужно где-то установить значение, а затем посмотреть, что это на самом деле при визуализации, и применить коэффициент для получения что вы хотите (через javascript). Раньше я использовал такой код, чтобы обеспечить текст, установленный в поле с заданным размером пикселей;

var fontScale = 1 ; 
var mySpecifiedFontSize = 24 ; 
var myTextElement = document.getElementById("MY_TEXT_ELEMENT_ID") ; 
function fontScalingCorrection(){ 
    var style = window.getComputedStyle(myTextElement); 
    var fontSize = parseInt(style["font-size"]); 
    if(!isNaN(fontSize)){ 
     if(fontSize !== mySpecifiedFontSize){ 
      fontScale = (mySpecifiedFontSize/fontSize) * fontScale ; //allows for multiple calls 
      myTextElement.style.fontSize = (fontScale * mySpecifiedFontSize) + "px" ; //or units used 
     } 
    } 
} 
//after the element has been drawn once (or use another element as a size marker) 
fontScalingCorrection();