2017-02-14 10 views
1

Мой сайт использует бутстрап 3 для размещения устройств различного размера экрана. Я использую класс bootstrap hidden-xs, чтобы скрыть ненужное фоновое изображение моей страницы на небольших устройствах, что позволяет им сосредоточиться на важных компонентах ввода без необходимости увеличения. Это отлично работает, если вы измените размер окна браузера или настроите разрешение монитора. Он также отлично работает на телефонах с низким разрешением, таких как iPhone.bootstrap не реагирует на телефоны с высоким разрешением

Однако, поскольку bootstrap использует размер пикселя экрана, это не работает на телефонах Android с высоким разрешением. В результате пользователь телефона должен увеличивать или работать, чтобы выбрать подходящие входы, поскольку они кажутся маленькими на физически маленьком экране телефона.

Есть ли легкое решение для этого, чтобы пользователи с телефонами с высоким разрешением не выглядели так же, как пользователи настольных компьютеров?

Спасибо!

+0

Вам, вероятно, потребуется проверить устройство и разрешение в JS и включить-отключить любой класс, но это всего лишь предположение. – Mihai

+0

У вас есть HTML для этой страницы? Я думаю о двух вещах, которые могут решить это, просто хочу проверить, что подход HTML еще не реализован для вас. –

+0

@KarlBrown Можете ли вы уточнить? Я просто используя ваши стандартные столбцы начальной загрузки:

TheCatWhisperer

ответ

4

Вы можете использовать этот мета тег

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

<head> в разделе вашего HTML-документа, масштабировать документ на основе ширины экрана устройства вы используете.

Check MDN для получения дополнительной информации о метатеге viewport и ее использовании.

+0

Это похоже на то, что я ищу. Позвольте мне нажать этот тег на мой dev-сервер и посмотреть, работает ли он. – TheCatWhisperer