将响应式引导设计转换为静态 [英] Converting responsive bootstrap design to static

问题描述

我使用Bootstrap Twitter设计了一个响应式设计的网站. 这是一个非常复杂的页面响应式明智的选择，其中包含大量数据，表，div，js……

I have designed a website in responsive design using bootstrap Twitter. It is a very complex page responsive wise, with really a lot of data, tables, divs, js …

它在计算机上运行良好；但是，一旦我尝试通过手机访问它，它就无法正常工作.它加载了所有数据，但由于响应式设计，手机似乎滞后了.主要问题是我无法滚动浏览网页，只是卡在网页的某个部分.

It works great on a computer; however as soon as I try to access it on a mobile phone, it doesn't work. It loads all the data but it seems like the phone is lagging because of the responsive design. The main issue is that I cannot scroll through the web page, it just get stuck on a section of the page.

我不介意拥有一个静态页面，该页面不会在手机上调整大小，因为很少会在移动设备上使用它.我的想法是检查请求是来自手机还是计算机，然后加载静态页面或动态页面.

I do not mind having a static webpage that does not resize on a phone as it is very rare it will be used on a mobile device. My idea would be to check whether the request is coming from a mobile phone or a computer, and then load either a static page or a dynamic one.

为此，我需要一个工具将响应式设计转换为静态，并能够检查请求的来源.有人对我该如何做有什么建议吗?这是一个好主意吗?我应该使用哪种工具?

For this I would need a tool to convert my responsive design to static and be able to check where the request is coming from. Does anyone have any advice on how I could go about this? Is this a good idea? What kind of tools should I use?

预先感谢

进化

我试图摆弄视口，这是我想到的:

I tried to fiddle with the viewport and here is what i came up with:

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.我需要能够动态计算页面的高度，因为我的所有页面都不都具有相同的高度.我该怎么办?我在这里问了一个具体问题:获取页面内容的高度

However the problem i get now that the height value on my computer and on phone are different, I get 955 on a computer and 1022 on a phone. I need to be able to calculate dynalically the height of the page as all my pages are not exaclty the same height. How could i do this ? I asked a specific question on this here: Get height of page content

推荐答案

一种解决方案是修改bootstrap.css文件并删除所有媒体查询.

One solution would be to modify the bootstrap.css file and remove all of the media queries.

这个问题似乎是重复的.您可以在此处查看带有详细解决方案的原始帖子:

This questions seems to be a duplicate. You can see the original post with detailed solutions here:

重复:如何在Twitter Bootstrap 3中删除响应功能?

这篇关于将响应式引导设计转换为静态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！