Большое приложение с PhoneGap + Bootstrap в Google Nexus
Телефон Google Nexus предлагает огромное (как по мне) разрешение экрана, и все мои мобильные приложения для сборки PhoneGap выглядят крошечными. Например, при тестировании приложения на настольном компьютере все в порядке, но после компиляции и установки его на телефон Google Nexus кнопки становятся крошечными, а текст почти нечитаемым.
Я использую Twitter Bootstrap, но боюсь, что получу аналогичные результаты на любом другом фреймворке на этом телефоне.
Мобильные версии веб-страниц, отображаемые в Mobile Chrome, легко адаптируются и могут использоваться как на настольном компьютере, так и на любом другом устройстве. Только приложения PhoneGap выглядят такими маленькими.
Есть ли легкий способ обойти эту проблему?
1 ответ
По умолчанию Bootstrap не поддерживает адаптивный макет. Это объясняется довольно профессионально: "В настоящее времяBootstrap по умолчанию не включает отзывчивые функции, так как не все должно быть отзывчивым. Вместо того, чтобы поощрять разработчиков удалять эту функцию, мы полагаем, что лучше включить ее по мере необходимости".
Смена одного meta тег и замена ссылки из обычного CSS на отзывчивый в <head> раздел решает проблему:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
После этого простого изменения приложения PhoneGap корректно адаптируются к большим размерам и плотности экранов и отображают элементы Bootstrap в правильных размерах.