Тот же размер шрифта на веб-сайте на разных телефонах

В настоящее время я разрабатываю шаблон Wordpress, и, наконец, я начал делать его отзывчивым, однако размеры шрифтов на телефонах разные. Например, у меня есть Nokia Lumia с Microsoft Edge, а текст на моей странице большой. Однако, на Samsung Galaxy S2 с Chrome, текст крошечный. Как я могу сделать так, чтобы все телефоны отображали большой текст?Тот же размер шрифта на веб-сайте на разных телефонах

В случае необходимости, вот ссылка: http://acevix.com/development/temp/index.php/2015/12/12/hello-world/

источник

2016-01-23 Radu

Опубликовать jsfiddle с кодом, чтобы мы могли видеть, что происходит, я вижу, что вы используете бутстрап, поэтому попробуйте указать размер шрифта im em -s, потому что bootstrap устанавливает базовый шрифт для элементов на всех платформах :) –

В основном я использую em, так как вы можете видеть по ссылке, я использую только то, когда мне это действительно нужно. Я не установил размер по умолчанию, хотя (в пикселях). Нужно ли это делать, чтобы это исправить? Если да, то как? – Radu

Нет, вам не нужно, bootstrap делает всю работу, если вы ее включили;) –

Поскольку существует широкий диапазон отображения размеров и разрешения в основном это лучший способ, чтобы установить размер любого объекта на странице с помощью относительных единиц, т.е. em, vw или vh.

см http://www.w3.org/TR/css3-values/#relative-lengths

Абсолютные единицы как px или in зависят от плотности пикселей устройства. Поэтому, если у вас есть дисплей с 250ppi, а другой с 150 ppi, текст будет больше в последнем случае.

см http://www.w3.org/TR/css3-values/#absolute-lengths

источник

2016-01-23 10:49:28 treeno

Я в основном использую em, как вы можете видеть по ссылке. Я использую только те рэки, когда мне это действительно нужно. Я не установил размер по умолчанию, хотя (в пикселях). Нужно ли это делать, чтобы это исправить? Если да, то как? – Radu

em устанавливает размер относительно родительского размера шрифта. Поэтому, если вы определяете размер шрифта в родительском элементе с абсолютными единицами, то em также будет зависеть от абсолютного значения ... или, другими словами, он не будет зависеть от размера экрана. Если я не ошибаюсь, вы устанавливаете размер шрифта 14px в теге body. Это может быть причиной. – treeno

@treeno, если вы видели, что его страница использует bootstrap, а bootstrap устанавливает базовые шрифты для элементов, поэтому нужно только определять единицы в em's. –

Вы должны использовать эм-с, так как вы используете загрузчик, и еще одна вещь, что ваш сайт не имеет, так как я мог видеть код

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

Это действительно важный тег для отзывчивого дизайна, попробуйте добавить его :)

источник

2016-01-23 11:20:03

Не могли бы вы объяснить, почему метатег важен для гибкого дизайна? – treeno

Почему бы мне :), вам нужно дать указание устройству принять сайт на его ширину, и настоятельно рекомендуется его поместить, и вот об этом больше: http://webdesign.tutsplus.com/articles/quick-tip-dont -forget-на-видовых-мета-тег - веб-дизайн-5972 –

Тот же размер шрифта на веб-сайте на разных телефонах

ответ

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