Mobile Responsiveness works! Now how-to for tablets?

[transoptic]

I have a desktop site and have a ‘mobile’ stylesheet load when the device width is small enough,

however I’m not sure the code I need to add to make it look ‘zoomed in’ (maybe initial-scale=”2.0″) when in between a threshold for most tablets?

Here is what I have so far:

<meta name="viewport" content="width=600, initial-scale=.5, user-scalable=yes">
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles/style-mobile.css" />

[transoptic]

Anyone can help on this?

[Paulie_D]

Why would you want to zoom in?

I’d rarely change the initial scale value from 1. If the user wants to do that then let them.

Have your design styled for a tablet (that’s what media queries are for)…scaling to 5 seems massively excessive.

[transoptic]

Scaling is .5, not 5.

This is what looks good on most mobile devices given the design of the site. It has image galleries which needs a specific sizing to fit and look good. I’ve tested on iPhones and Android-powered handsets.

However, I’m not sure how to set it so that it ALSO looks good on tablets. It’s too small.
I appreciate a reply but yours did not address this, which was the point of this post.

Thanks

[Paulie_D]

The point is you shouldn’t need to scale at all.

If something is too small on mobile/tablet, use the media query (or CSS file you are loading) to make it bigger.

Is 10px to small to read on mobile?…make it 20px…that’s the essence of a media query

Change the dimensions, font-size…but just changing the zoom/scale…that’s not even close to being mobile design.

This scaling seems to be the equivalent of bringing the book you are reading closer to your face because the print is too small…when what you should be doing is reading a book with larger print!

[transoptic]

While I can appreciate the book analogy, it still doesn’t answer my question or bring swift resolution to my issue.

I’m sure you can appreciate that different websites serve different needs and things like, say jquery galleries, need to work slightly differently on different devices. Or I’m sure you can appreciate that having to go through my mobile-stylesheet and revamping sizes for everything from images to fonts to divs is a little more tedious than serving up a scale at a minimum tablet screen size.

It already looks good on handsets. I just need help getting things to fit right on a tablet.

If anyone in this forum can approach the problem from that perspective, you’ll be demonstrating that you’re good at PROBLEM-SOLVING rather than telling me what I “should be doing” in the first place.

Thanks in advance!

[Author]

Posts