Converting responsive bootstrap design to static

Question

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

possible duplicate of [How to remove responsive features in Twitter Bootstrap 3?](http://stackoverflow.com/questions/17935601/how-to-remove-responsive-features-in-twitter-bootstrap-3) — Sohrab Hejazi, Aug 12 '15 at 09:20
Have you tried simply using a `viewport` meta tag, that defines a fixed pixel width for the page? Mobile devices will then “zoom out” when they display the page. — CBroe, Aug 12 '15 at 09:21

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

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?

edited May 23 '17 at 11:53

Community

1
1

answered Aug 12 '15 at 08:58

Sohrab Hejazi

1,441
6
18
29

What would happen if i delete all of the media queries ? would i just not apply anny of the css to the pages ? – 0xtuytuy Aug 12 '15 at 09:08
The media queries are used to apply additional CSS to the page at different sizes. For example, it'll change the CSS and layout of the page if the width of the page falls below a certain size. If you remove the media queries, it would not change the layout if the page resizes hence removing the responsive aspect of the site. – Sohrab Hejazi Aug 12 '15 at 09:10
1

remove responsive features in Twitter Bootstrap 3 is not enough. As he only wants to remove on mobile and not on desktop. The only only to remove it, is to detect that it is on mobile and serve separate CSS with the bootstrap media queries removed. I do not think that it is the bootstrap that is slowing down the site on mobile but rather all the JS and CSS files he probably has included. – Darren Willows Aug 12 '15 at 09:21

Darren Willows · Answer 2 · 2015-08-12T09:13:54.270

The segregation of the mobile experience to a subdomain, the notorious ‘m’ domain, seems a little old school. This would do what you ask for but I prefer the idea of One brand, one codebase, one domain.

Bootstrap is not meant to be changed from responsive to static however. The only way you could do this is to add a browser detect and mobile detect and load specific css for that device.

1.Checking User Agent Serverside (I would use this method)

When a browser visits a site, it sends a string describing who it is called the user-agent string. It varies depending on the browser and platform.

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

etc

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.Clientside

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

If your HTML doesn't need to change between your mobile site and standard site, it may make more sense to send a different stylesheet just to mobile browsers.

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

This would load only the CSS needed for that resolution.

4..htaccess URL redirects

You can use a .htaccess redirect to transfer based upon the MIME types the browser supports. If the user's browser accepts mime types that include WML, then most probable that it is a mobile device.

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 Method (Not the best way)

Because mobile phones typically have a small screen width, you can redirect visitors to your mobile site if they have a screen width of less than or equal to 800 pixels.

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

There is also plugins for this if you use Wordpress etc.

Converting responsive bootstrap design to static

2 Answers2

Linked