Joan M Ответов: 1

Как бы вы диагностировали, почему некоторые шрифты отличаются от других на веб-странице, сделанной на PHP, CSS?..

Привет,

Я знаю, что это очень расплывчатый и общий вопрос, извините за это.

Я обновляю веб-страницу и пытаюсь выяснить, почему некоторые шрифты хорошо смотрятся в моем телефоне, а другие-очень маленькие.

Во всех настольных браузерах, которые я тестировал (chrome, firefox, edge, ie, opera), все выглядит идеально.

Единственными указанными шрифтами в CSS-файле являются следующие: "font: 11Pt Arial, Helvetica, sans-serif"; все остальные-по умолчанию.

Есть ли какой-нибудь инструмент, который мог бы помочь мне увидеть, что происходит?

Это происходит только в chrome для android...

Веб-браузер Samsung работает нормально...

Спасибо всем за любой указатель...

Что я уже пробовал:

дважды проверьте код, поищите в интернете...

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Какие шрифты? Вы проверили, поддерживаются ли они в мобильном chrome?

Suvendu Shekhar Giri

Вы не упомянули о шрифтах, о которых идет речь.

Joan M

В CSS-файле: "шрифт: 11Pt Arial, Helvetica, sans-serif;"

Joan M

В CSS-файле: "шрифт: 11Pt Arial, Helvetica, sans-serif;"

1 Ответов

Рейтинг:
5

Peter Leow

Вы не можете ожидать, что страница, подходящая для рабочего стола, будет отображаться так, как она есть, и будет выглядеть правильно на небольших экранных устройствах, таких как мобильные телефоны. HTML адаптивный веб-дизайн[^]
Больше читать:
1. Три буквы " Р " адаптивного веб-дизайна[^]
2. Основы Адаптивного Веб-Дизайна  |  Сеть  |  Разработчики Google[^]
Существуют эмуляторы устройств, включенные в инструменты разработчика большинства современных браузеров для имитации тестирования на реальных мобильных устройствах виртуально.
Чтобы запустить инструменты разработчика, нажмите CTRL+SHIFT+I в Google Chrome и Firefox, вы можете переключить панель инструментов устройства, на которой вы можете выбрать различные типы устройств, конфигурации экрана и повороты для тестирования ваших веб-страниц.

Joan M

Спасибо Питеру, на самом деле все выглядело именно так, как и должно было выглядеть, но некоторые шрифты.

Прочитав вашу первую ссылку, я добавил "<meta name="viewport" content="width=device-width, initial-scale=1.0"в свой код, и теперь все выглядит идеально.

Спасибо.

Ответ принят.