Чувствительный шрифт видового экрана не согласован на мобильных устройствах iOS

Question

После проведения некоторых исследований я решил использовать модули vw для масштабирования моей отзывчивой типографии.

%meta{:content => "width=device-width, initial-scale=1, user-scalable=0", :name => "viewport"}/ 

CSS:

html{ 
    font-size: 1vw; 
} 

// h4 tag above form 
h4{ 
    font-size: 1.60rem; 
    text-align: center; 
} 

//form width 
.e2ma_signup_form { 
     margin: 0 auto; 
     width: 36rem; 
} 

@media screen and (max-device-width: 480px){ 
    html , body{ 
    -webkit-text-size-adjust: none; 
    } 
} 

Приведенные выше показывает, как у меня есть корень, чтобы установить 1vw, то есть я h4 тег выше формы.

На рабочем столе у ​​меня есть длина текста в теге h4, соответствующем ширине формы (показано на рисунках ниже).

Моя проблема заключается в том, что на ios шрифт, похоже, не рассчитан таким же образом. Наиболее очевидно, где тег h4 превышает ширину формы. Кажется, работает на Android.

Что может быть причиной этого и как его решить?

На настольном/хромированном эмуляторе (правильно выровненном для iphone 6). On desktop/chrome emulator

on ios, both safari and chrome

КСН, сафари и хром

Answer 1

Из моих кишках:

Глядя на первом скриншоте окно просмотра по ширине элемента формы. Таким образом, текст (устанавливается в vw = viewport-width) отображается так, как вы ожидаете. Как только видовой экран шире (на втором снимке экрана есть что-то позади), текстовое поле становится шире (относительно ширины области просмотра). Помогло бы также установить ширину формы в vw?

Кроме того, у вас всегда будут незначительные несоответствия между браузерами, потому что они делают шрифты очень по-разному. Особенно Firefox на Mac OSX настолько отличается от всех других браузеров на одной машине. Знайте об этом также (shouldn это не слишком большая проблема по сравнению с вашими.)

Редактирование: с другой стороны, это также может быть связано с плотностью пикселей фактического iPhone 6 по сравнению с эмулируемой версией в Chrome (что , возможно, происходит на другом экране с различной плотностью пикселей?). Это то, о чем OP еще не упоминалось.

В соответствии с таблицей http://viewportsizes.com/?filter=iPhone%206 фактический iPhone 6 имеет 375 пикселей в портретном режиме. Соответствует ли это эмуляции в вашем Chrome?

Редактировать 2: Данные с фактической домашней страницы Apple сообщают другую историю с разрешением 1334 x 750 пикселей на 326 ppi !!! Таким образом, вы не имеете дело с 375 пикселями, но удваиваете количество пикселей на самом устройстве по сравнению с реальными 375 пикселями на экране, имитирующими устройство.

Answer 2

Я попытался решить эту проблему, когда попытался подражать среднему масштабированию старой школы. Я узнал, что сделать относительный размер шрифта не способ пойти (хотя это так, как это ДОЛЖНО работать).

Мое решение использует JavaScript/JQuery:

$(window).resize(function() { 
    var w = $(window).width(); 
    var h = $(window).height(); 
    var wspec = parseInt($("#innerbody").css('width')); 
    var hspec = parseInt($("#innerbody").css('height')); 
    if((w/h)>(wspec/hspec)) var scale = h/hspec; 
    else var scale = w/wspec; 
    $("html").css('transform','scale('+scale+')'); 
    $("html").css('-ms-transform','scale('+scale+')'); 
    $("html").css('-webkit-transform','scale('+scale+')'); 
    $("html").css('-moz-transform','scale('+scale+')'); 
}); 

Для полного демо см эту страницу: http://apps.usecue.com/viewport/flashscaling.html

Answer 3

Это нормально, что результат не то же самое на рабочий стол и мобильный телефон в качестве вашего размера шрифта основан на ширине видового экрана (которая отличается от мобильной на рабочем столе).

Если я правильно понял вашу проблему, вы хотите, чтобы ваш текст h4 никогда не был шире вашей формы, это правильно? В этом случае вы не можете сделать это в CSS, вам нужен Javascript. Вы можете попробовать Flowtype или FitText (оба требуют jQuery), поскольку они являются окончательным решением для таких проблем.

Вы также можете быть заинтересованы в this article about using viewport unit for typography, в котором объясняется, почему вы не можете использовать свой html только в окне просмотра (используйте процент + блок просмотра для определения минимального размера).

Последняя рекомендация, которую я могу вам дать, - не использовать user-scalable. There is a great discussion here on SO Об этой теме.

Answer 4

Как сказал Марко, браузеры визуализируют шрифты по-разному.

На вашем скриншоте я вижу, что один из iOS имеет более широкий интервал между буквами. Если бы я тебя, я бы целевой заголовок строку на прошивке с чем-то вроде этого:

.caption { 
    letter-spacing: -1px; 
} 

Answer 5

// We use these to control header font sizes 

// для средних экранов и выше

$ h1-размера шрифта: рем-известково (44)! Default;

$ h2-font-size: rem-calc (37)! Default;

$ h3-font-size: rem-calc (27)! Default;

$ h4-font-size: rem-calc (23)! Default;

$ h5-font-size: rem-calc (18)! Default;

$ h6-font-size: 1rem! Default;

// Мы используем их, чтобы контролировать уменьшение размера заголовка на небольших экранах

$ h1-шрифт-восстановительная: рем-известково (10) по умолчанию;

$ h2-font-reduction: rem-calc (10)! Default;

$ h3-font-reduction: rem-calc (5)! Default;

$ h4-font-reduction: rem-calc (5)! Default;

$ h5-font-reduction: 0! Default;

$ h6-font-reduction: 0! Default;