Fixed web page width for mobile devices

I've been working on a responsive design. To stop the content from crossing boundaries i've used viewpoint meta tag with width = 480. The problem is i want my website to load with minimum of 480px no matter what. If the screen width is less than 480px I want it to fit the screen width by "Zooming out".

I've used the following viewpoint meta tag:

<meta name="viewport" content="width=480px, initial-scale=1, maximum-scale=1" />

I've also used min-width css tag to specify minimum width.

<body style="min-width: 480px; width:100%; margin:auto;">

So after all this when i tried to load the website in DevTools Emulator (Google Chrome), it shows a horizontal scrollbar. Got any ideas on how to do it.

Answers


Have you tried width=device-width?

I don't think forcing the 480px in the meta will do what you want (not crossing media-query-type boundries).


Need Your Help

Examples of cases where using private variable/methods in oop languages is useful/necessary

javascript oop closures scope private-members

Whenever I try to research this question the answer usually presented is along the lines of "so the outside world does not have direct access to the local variables." What's missing here for me is...