Twitter Bootstrap Question posted in

Twitter bootstrap – 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

Tags:

2

Answers


  1. 0

    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?

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search