Conditional viewport scale-to-fit when screen width "is too small or too big"?

Question

I am still new to responsive design, so sorry if my question does not make sense.

I am currently implementing two CSS sets for two screen widths:

@media screen and (max-width:659px) { ... }

@media screen and (min-width:660px) { ... }

In the first set, I have a 480px wide table with content and it is centered with margin auto. I am happy to have a bit of background space on the left and right if the screen size is between 480px and 659px.

The second set adds an extra column to the left, making the table 660px wide.

I am worried when the screen width goes below 480px or significantly above 660px. My table would be truncated or there would be much too much margin on its left and right. This is where scaling might be interesting.

I read that it is recommended to implement the viewport meta tag as following:

<meta name="viewport" content="width=device-width, initial-scale=1">

But is this the right solution for my issue? What is the right way to implement my viewport meta tag? Would it be possible to automatically 'scale to fit' both when the table is 480px or 660px wide? If yes how?

Answer 1

There's a pretty neat solution for responsive tables on Zurb's Playground.

http://zurb.com/playground/responsive-tables

It's still in playground but so far i've used it and it works really well. And with any type of responsive design you are always going to want to have the mobile viewport in your page. It's Semantics Dear Pal. :) And it really will make your responsive design so much easier.