2015-11-13 3 views
0

Итак, я создал веб-приложение с Ruby on Rails, а стиль - с помощью Bootstrap. К сожалению, дизайн передней части не мой сильный набор.Сделать поле ввода текста подходящим для мобильного экрана

Приложение размещается here и исходный код on GitHub

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

Можно ли, используя Bootstrap или Rails, (я предпочел бы сделать это на стороне клиента, если это возможно), чтобы сделать эти текстовые поля и кнопки повторно размер, чтобы соответствовать экран мобильного телефона?

ответ

1

Вы упускаете viewport мета-тег в вашем <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

Заканчивать основной шаблон в документации Bootstrap: http://getbootstrap.com/getting-started/#template

+0

Так что это не делает именно то, что мне нужно, но это начало. Добавив метатег viewport формы на мои размеры индексной страницы на экран мобильного телефона правильно. Однако теперь, когда этот метатег присутствует в приложении, он вызывает мою вторую страницу (которая отображает wordcloud), чтобы значительно увеличить масштаб этого слова. Это делает wordcloud нечитаемым, и поэтому приложение непригодное для использования на мобильных устройствах. – FluffyKittens

+0

Ну, вы просто попросили «сделать эти текстовые поля и кнопки переделанными, чтобы они соответствовали экрану мобильного телефона». HTML для вашего tagcloud генерируется jQCloud, и это не очень нравится в гибких макетах (см. Вопрос Github: https://github.com/lucaong/jQCloud/issues/31). Однако они упоминают перерисовку при изменении размера в своей вики: https://github.com/lucaong/jQCloud/wiki/Resizing – Savjee

+0

Удивительно, спасибо. Я попробую. – FluffyKittens

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