CODEWITHSUNDEEP
htmlcssmobileresponsive-designviewport
Chuck Le Butt
Chuck Le Butt

Reputation: 48798

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 website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.)

Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but this setting appears to also be honoured by tablets, too.

I realise you can use a detection solution (like Mobile Detect) but then it's not really fully fluid (although I suppose you could use Mobile Detect to insert a viewport meta tag if a mobile phone is detected). Is there a better way to get tablets to display the desktop version?

I feel like I'm missing a very obvious trick!

Upvotes: 0

Views: 1389

Answers (2)

WaltRiceJr
WaltRiceJr

Reputation: 151

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

Upvotes: 1

user4566987
user4566987

Reputation:

Use media queries for different sized screens, ie: small(phones), medium(tablets), and desktop versions. You will only change the content thay needs changed in the queries. Then also set a meta tag with the viewport set at 1.0. Search around for media queries, there's a lot of information of there. Good luck!

Upvotes: 0

Related Questions