Force Bootstrap для мобильного телефона

Question

Я работаю над отзывчивым дизайном с использованием скриптов Google Apps и сталкиваюсь с некоторыми проблемами. Все содержимое сайта передается через изолированную программную программу iFrame, которая не позволяет мне создать мета-видовое окно. Это означает, что независимо от того, на каком устройстве я просматриваю приложение, оно рассматривается как настольное приложение.

Например, для просмотра веб-приложения на Galaxy S4 показан полный вид 1080x1920.

Google создает песочницу iframe и устанавливает ее на разрешение устройства. Они не позволяют создавать мета-элемент, а создание его с помощью JavaScript не принесет вам никакой пользы, так как вы не можете изменять содержимое вне песочницы. Как только страница загрузится, вы можете масштабировать окно, и элементы будут изменяться, как и ожидалось, но это не помогает мне на мобильном устройстве.

Лучшее, что я могу придумать, это получить навигатор.userAgent после загрузки страницы и затем изменить каждый элемент после факта. Далек от идеала.

Итак, есть ли способ обмануть Bootstrap в рендеринг мобильных устройствах, или я застрял в написании медиа-запросов и пользовательских CSS?

Answer 1

У меня была аналогичная проблема (в модальной, не IFrame), поэтому создается довольно длинный, но основную страницу CSS, чтобы решить:

https://github.com/shawntaylor/bootstrap-force-device

После того, как вы добавите файл CSS для вашего проекта, вам звоните force-xs (или force-sm, force-md или force-lg) на родительский div содержимого, которое вы хотите принудительно. Затем CSS заставляет внутренний контент вести себя так, как будто он находится на устройстве xs.

<span class="force-sm"> 
    <div class="col-sm-6 col-md-4"> 
    <h1>I want to make this behave like it's on an sm device</h1> 
    <h2>Even when it's on a desktop</h2> 
    <p>Or within a window that thinks it's a desktop</p> 
    </div> 
</span> 

Answer 2

Я не имею ссылку под рукой, но я буквально только что прочитал об этом:

Вы можете скачать версию Bootstrap CSS, который включает в себя только запросы мобильных средств массовой информации, а также удалить медиа-запрос, так что мобильный CSS загружается на всех устройствах.