How to call different html page when viewport size changed?

Question

I am developing responsive website which will display for both mobile and tablets. If the content/designs are same for mobile and tablet, I can use media queries to change the css file based on viewport like below.

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">

<link rel="stylesheet" type="text/css" media="screen and (min-width: 641px) and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">

<link rel="stylesheet" type="text/css" media="screen and (min-width: 801px) and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1025px)" href="css/devices/screen/layout-modify4.css">

By default, I am using index_mob.html for mobile responsive designs. But, my content are slightly different for tablet.

So, how can I find the viewport size for tablet and based on the viewport size, I need to call tablet design page - index_tab.html

Is it possible?

Why don't you just change the display values for the content you want to show/hide using classes? That way, you only have one HTML page to manage. — Brian, Oct 16 '14 at 12:49
Yes but most of the content looks odd. So, definitely I need to call another html page. — UI_Dev, Oct 16 '14 at 12:53
This has been answered before on SO: http://stackoverflow.com/questions/11848422/change-site-completely-if-browser-size-is-small — Brian, Oct 16 '14 at 12:55
I agree with @rnrneverdies solution and Brian Bennet's comment. Dinesh what you are attempting to do is just bad Interface design and in future will only lead to more maintainability problems — Sai, Oct 16 '14 at 14:08
Thank you Brian for the link...but I chose boostrap classes to visible and hide based on css.... — UI_Dev, Oct 16 '14 at 14:23

score 2 · Answer 1 · edited May 23 '17 at 10:25

aside note: i agree with Brian Bennet comments.

So, how can I find the viewport size for tablet and based on the viewport size

There are many ways to do it, but there is no official way. My suggestion is to look at the dimensions used for displays bootstram 'sm' and 'md'. Also check if it supports touch screen.

Custom Way:

// detects touch
function isTablet() {
   if (('ontouchstart' in window) || // FF, Chrome, Safari
       (navigator.maxTouchPoints > 0) ||  // >= IE 10
       (navigator.msMaxTouchPoints > 0)) {

      // tablet orientation portrait or landscape
      if (window.innerWidth < window.innerHeight) {
            // Bootstrap sizes for sm/md
            return (window.innerWidth > 767 && window.innerWidth < 993);
      } else {
            return (window.innerHeight > 767 && window.innerHeight < 993);
      }
   }
   return false;
}

Another approach would be to use Modernizr or http://detectmobilebrowsers.com. But Moviles detected. No distinguishes tablets.

I need to call tablet design page - index_tab.html

Is it possible?

Yes, using Javascript:

<script>
   // put isTable() here.

   // change here 'the tablet condition'
   if(isTablet()) {
        window.navigate('index_tab.html');
   } 
</script>

JavaScript how to check User Agent for Mobile/Tablet

Detect different device platforms using CSS

How to call different html page when viewport size changed?

1 Answers1