Преобразование адаптивного дизайна бутстрепа в статику

Question

Я разработал веб-сайт в отзывчивом дизайне, используя загрузочный Twitter. Это очень сложная страница, чувствительная к мудрым, с действительно большим количеством данных, таблиц, divs, js ...

Это отлично работает на компьютере; однако, как только я попытаюсь получить доступ к нему на мобильном телефоне, это не сработает. Он загружает все данные, но кажется, что телефон отстает из-за отзывчивого дизайна. Основная проблема заключается в том, что я не могу прокручивать веб-страницу, она просто застревает в разделе страницы.

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

Для этого мне понадобится инструмент для преобразования моего отзывчивого дизайна в статический и возможность проверить, откуда идет запрос. Есть ли у кого-нибудь советы о том, как я могу это сделать? Это хорошая идея? Какие инструменты я должен использовать?

Спасибо заранее,

EVOLUTION

Я пытался возиться с видовым и вот что я придумал:

function calculateHeightOfBody() { 
var heightBefore = window.innerHeight; 

var height = heightBefore/window.devicePixelRatio; 

viewport = document.querySelector("meta[name=viewport]"); 
viewport.setAttribute('content', /*'width='+width+',*/ 'height='+height); 

alert('heigh is ' + height); 

}

Однако проблема я получаю теперь, что значение высоты на моем компьютере и на телефоне отличается, я получаю 955 на компьютере и 1022 на Телефон. Мне нужно уметь динамически вычислять высоту страницы, так как все мои страницы не отличаются высотой одинаковой высоты. Как я могу это сделать? Я задал конкретный вопрос по этому вопросу: Get height of page content

Answer 1

Одним из решений было бы изменить файл bootstrap.css и удалить все медиа-запросы.

Этот вопрос кажется дублирующим. Вы можете увидеть оригинальный пост с подробными решениями здесь:

дубликат: How to remove responsive features in Twitter Bootstrap 3?

Answer 2

Сегрегация мобильного опыта в подобласти, пресловутый «м» домен, кажется немного старой школы. Это будет делать то, о чем вы просите, но я предпочитаю идею одного бренда, одной базы кода, одного домена.

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

1.Checking User Agent Serverside (я хотел бы использовать этот метод)

Когда браузер посещает сайт, он посылает строку, описывающую, кто это называется строкой агента пользователя. Он варьируется в зависимости от браузера и платформы.

iPhone - Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3 

т.д.

if(strstr($_SERVER['HTTP_USER_AGENT'],'Android') || 
    strstr($_SERVER['HTTP_USER_AGENT'],'webOS') || 
    strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || 
    strstr($_SERVER['HTTP_USER_AGENT'],'iPod') 
    ){ 
    // Send Mobile Site 
} 

2.

клиентской

if(navigator.userAgent.match(/Android/i) || 
    navigator.userAgent.match(/webOS/i) || 
    navigator.userAgent.match(/iPhone/i) || 
    navigator.userAgent.match(/iPod/i) || 
    ){ 
// Send Mobile Site 
} 

3.Use CSS Media Type

Если HTML не нужно переключаться между мобильной версии сайта и стандартного сайта, он может иметь больше смысла, чтобы отправить другую таблицу стилей просто мобильных браузеров.

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" /> 

Это будет загружать только CSS, необходимые для этого разрешения.

4..htaccess URL перенаправляет

Вы можете использовать .htaccess редирект для передачи на основании типов MIME браузер поддерживает. Если браузер пользователя принимает типы mime, которые включают WML, наиболее вероятно, что это мобильное устройство.

RewriteEngine On 
# Check for mime types accepted by mobile devices 
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC] 
RewriteCond %{REQUEST_URI} ^/$ 
RewriteRule^http://m.domain.com%{REQUEST_URI} [R,L] 

5.window.location метод (не лучший способ)

Поскольку мобильные телефоны, как правило, имеют небольшую ширину экрана, вы можете перенаправить посетителей на свой мобильный сайт, если они имеют ширину экрана в меньше или равно 800 пикселей.

<script type="text/javascript"> 
    if (screen.width <= 800) { 
    window.location = "http://m.domain.com"; 
    } 
</script> 

Существует также плагины для этого, если вы используете Wordpress и т.д.