Chaitanya
Chaitanya

Reputation: 1600

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.

Upvotes: 1

Views: 1253

Answers (1)

Matthew Booth
Matthew Booth

Reputation: 71

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).

Upvotes: 1

Related Questions