Home/ Questions/Q 8233583
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T18:10:45+00:00

I’ve got an embedded HTML file that I’m using for the help pages within

  • 0

I’ve got an embedded HTML file that I’m using for the help pages within my iOS app but want to style some things differently when displayed differently on iPad and iPhone. Having read a bunch I’ve learned about the @media syntax and all but for the life of me I can’t get it to work properly. Given the HTML file shown below, why does it ALWAYS just show the iPad styled background (pink) instead of adjusting based on device?

<head>
    <title>Help</title>

<meta name="viewport" content="width=device-width">
    <style type="text/css">
        h1 {text-align: center; font-family: "Tahoma", Geneva, sans-serif; font-size:30px; color:#ffdd00;font-weight:bold; text-shadow: rgba(0, 0, 0, 1) 2px 2px;}

        /* iphone - GREEN */
        @media only screen and (max-device-width : 480px) {
            body {background-color:#009900;}
        }

        /* ipad  - PINK */
        @media only screen and (max-device-width : 1024px) {
            body {background-color:#ff8888;} 
        }
    </style>
</head>
<body>
    <br>
    <h1> I Need Some Help!</h1>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The C in CSS stands for ‘cascading’. Your iPad styles are overwriting your iPhone styles. Try switching them around like this:

    /* ipad  - PINK */
@media only screen and (max-device-width : 1024px) {
    body {background-color:#ff8888;} 
}

/* iphone - GREEN */
@media only screen and (max-device-width : 480px) {
    body {background-color:#009900;}
}

    How wide is the iPhone viewport? 480px?

    In your code, you’re first checking if the device width is <=480. This returns true, so the enclosed styles are applied. Then, your code checks if the device width is <=1024. 480 is indeed less than 1024, so the enclosed styles are applied.

    • 0