Setting viewport, initial scale, and device width doesn't resize to device width

Question

http://www.designbeeadvertising.com/

No matter how I set the meta viewport, no matter how I change it up and alter it, the site still goes outside the boundries of the device width on Android/iPhone/iPad. I keep recommending a mobile responsive site to the client, but they want it just to show up as a full desktop version, but scaled down.

Can someone please help me with this? I can't figure out what's going on here and I've tried just about everything and I can't get it to scale down to fit the device...

Answer 1

I am a beginner to HTML5, but hope the following helps.

/ -------------media queries------------ /

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

@media all and (min-width: 480px){
}

I had used these media queries in my sample responsive site which worked well.

Check them, hope it helps.

Answer 2

You can achieve this easily, by using this meta tag:

Assume your layout is 1000px as a width, and want the site to get 50px padding from the two sides, so the viewport meta tag will be:

<meta id="viewport" name="viewport" content="width=1100, initial-scale=1.0">