Rémi Rémi -4 years ago 141
HTML Question

Converting responsive bootstrap design to static

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?

Thanks in advance,

EVOLUTION

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);


}

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

Answer Source

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:

duplicate: How to remove responsive features in Twitter Bootstrap 3?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download