默认情况下，我的网站会在手机上缩小

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 (eg 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.

Answer 2

After much trial and error I got the following to work correctly on iPhone 5.0.1 and Android 2.3.6. The site was designed for a 480 width. Depending on the width of your site you have to play around with the width value for the iPhone.

<meta name="viewport" content="width=520, target-densitydpi=high-dpi" />
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" /> 

Answer 3

I'm surprised meta viewport didn't work for you (on Mobile Safari). Can you post what you used?

UPDATE : This generally works for me... give it a try:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

If that works, you can then start playing with the scale values to let users zoom if they want to, and by how much.