Адаптивный дизайн / видовые экраны

Допустим, у меня есть веб-сайт, который в мобильном представлении выглядит так: Как видите, шрифт слишком мал

Как лучше всего сделать шрифт более читабельным?

Область просмотра в настоящее время настроена следующим образом:

<meta name="viewport" content="width=1366, user-scalable=yes">

Изменило бы это на

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

какая разница? Существуют ли какие-либо онлайн-эмуляторы, которые могут показать мне, как сайт будет выглядеть с этим окном просмотра? Я новичок в этом, очевидно, но до сих пор я использовал mobilephoneemulator.com, где я могу видеть свои изменения в CSS, но не изменения в области просмотра.

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


person Xar    schedule 29.01.2015    source источник


Ответы (1)


Причина, по которой текст такой маленький, заключается в том, что вы сообщаете браузеру, что ширина телефона составляет 1366 пикселей, в основном при уменьшении масштаба веб-сайта.
Итак, да, используя:

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

Должен решить проблему.

person Jacob Gray    schedule 29.01.2015