Question

So I want users to be able to see my background on my website. Currently my websites width is 925px and when you view the website in a mobile browser (e.g. iPhone, Opera Mini) it is zoomed in on the text and the user can’t see the background.

I’ve tried using the meta viewport tag unsuccessfully. How do I get my website to be zoomed out by default on mobile browsers?

EDIT:

Here is the code I’ve tried so far:

<meta name = "viewport" content = "width = device-width">

Answer 1

I know this is an old question, but I am answering anyway in case someone else needs the answer.

As of September 2011, Opera Mini is still using version 2.5 of the Presto rendering engine. Viewport isn’t available in Opera until Presto 2.7. (Opera Mobile, our smart phone browser does support viewport.)

Try this:

<meta name="viewport" content="initial-scale=0.25">

When you include width=device-width, the browser ‘magically’** finds the content area and adjusts it to fill the width of the device. If you want the background to peek through, you’ll need to shrink the entire page to fit within the viewport.

Leaving <meta name=viewport> out entirely will also work, but you will typically see less of the background image.

Ideally, however, you should also use media queries to create a site that works at a variety of widths.

** Using heuristics of some kind that a browser developer would be able to explain better than I can.