1

I'm trying to teach myself how to make a mobile version of a website, so I started off with something basic.

I have the following code

<body> 
You are using...
<p class="mobile">
Mobile
</p>

<p class="desktop">
Desktop
</p> 
</body>

with the CSS

@media screen and (max-width: 480px)  
{    
     p.desktop {
         display:none;
     }
}

    p.mobile {
        display:none;
    }

Basically, I want either "mobile" or "desktop" to display depending on which device you're using. When I navigate to the site on my desktop it says "desktop", so that seems fine. But when I do so on my iPhone it still says desktop.

I have tried increasing the max-width to 640px which is the iPhone 4S' resolution. But I still have no luck. What am I doing wrong?

4

1 回答 1

5

The default viewport on an iOS device is somewhere around 1000 pixels. You may notice when you pull up your test page that it doesn't look like it's a 320px wide - it's way zoomed out.

You need a viewport meta tag in your page head that sets the viewport width to that of the device:

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

Once in place, you'll find your @media query works nicely (although you need a p.mobile { display: block; } bit to make the "mobile" text show up).

于 2012-08-02T03:57:27.560 回答