How can I use the viewport meta tag to scale fixed width layouts up to fit different screen widths - viewport

Question

I am working on a fixed width legacy site and want to create a more optimal experience for tablet users by implementing a couple adaptive layouts. The first layout will be a 600px wide design and it will be displayed on devices with 600px - 768px screen widths. The second adaptive layout will be a 769px wide design and it will be displayed on devices with 769 - 1023 screen widths.
I want to know how I can use the viewport meta tag to make the designs scale up to fit into mobile browsers with widths larger than the original design.
For example, when the 600px design is viewed on a device with a 768px browser screen width, how can I make the smaller design take up the full width of the screen?
I have found a lot of information about adaptive layouts for websites with fluid grids, but nothing that specifically talks about the relationship between design width and viewport sizes for fixed width sites - at least not one that I can understand.

Answer 1

It is called responsive web development.
First step is to put below tag in your code inside head tag part.
For responsive design use media queries:
Now use the media queries, here is good example of media queries . Also learn how to use it.
Here is small snippet of code which will guide you how to use:-
<style>
.clear{ clear:both;}
/*this will work for desktop*/
#media only screen and (min-width: 801px){
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for tablet*/
#media only screen and (max-width: 800px) and (min-width: 521px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for mobile*/
#media only screen and (max-width: 520px) and (min-width: 320px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
</style>