Showing The Desktop Version Of A Fully Responsive Website On Tablets

How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow 'mobile' version on a tablet? (Usually the mobile version of a websit

Solution 1:

How it should work when adopted into the CSS standards:

Use @media queries in CSS, along with the @viewport CSS tag, instead of the meta viewport tag. There's a good explanation of how to do this here:

http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/

An example from the above link:

@media (max-width: 699px) and (min-width: 520px) {
  @viewport {
    width: 640px;
  }
}

You could use this to set different viewports on narrower and wider devices.

But for now, seems JavaScript is the only way to do it:

You can listen to the onResize event and check the width of the screen, and then adjust the viewport meta tag in the DOM accordingly.

See http://www.webdevdoor.com/responsive-web-design/change-viewport-meta-tag-javascript