Problems adjusting site resolution to mobile device screen size - css

Question

I'm redesigning my site to have two layouts based on screen resolution. One has 1000px for any screen 1010px or greater, and the other has 675px for smaller screens. Right now I'm using the following viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
This setup works fine in desktop browsers and on an iPad. However, both Android and iPhone browsers do not show the page correctly, they start at various levels of zooms. Instead I want the 675px display to be shown zoomed correctly so the whole width is shown on the screen. I tried to use:
<meta name="viewport" content="width=675px, user-scalable=yes">
And it improves the iPhone version somewhat but forces the iPad to show the smaller size even though it has a 1024px wide screen. Not quite sure how to fix this.
Btw the site is http://dendory.net

Answer 1

Have you tried removing the initial-scale=1.0 and just have your viewport as:
<meta name="viewport" content="width=device-width">
and then use media queries for your break points in the design.

Answer 2

Try working with mediaqueries. It lets you target a device to apply certain css properties on. You just simply paste it in your stylesheet. I use it to create responsive emails.
Here is an example of a simple mediaquery:
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
I hope this helps !

Answer 3

You should try using #media queries. Simply apply these to your stylesheet and you can have total variable styles depending on the device, size and what you want to achieve with different devices.
e.g.
/* MOBILE PORTRAIT */
#media only screen and (min-width: 320px) {
body {
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) {
body {
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) {
body {
}
}
In these you can simply apply different styles depending on the scale of the device as shown below...
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) {
body {
}
/* COLUMN GRID */
.g1,.g2,.g3 {display:inline; float: left}
/* 2 COLUMN GRID */
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
#media only screen and (min-width: 1024px) {
body {
}
/* 3 COLUMN GRID */
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}
}
This is very useful if you would like to have a fully interactive website for all devices. These days it is common practice to use media queries.
Also media queries are very transparent through most browsers which makes them a 'good practice' to use. Check this out!