Home/ Questions/Q 8320593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T22:42:15+00:00

I’m trying to teach myself how to make a mobile version of a website,

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0