0

I was going to demonstrate screen resolution and responsive web pages, but after I managed to get an example showing on the google development tool, iPhone 7 screen emulator, but tried to browse the page on an actual phone and it's blank.

I've added the meta name:viewpoint and made sure everything is pointing to the correct file. By all accounts, it should work as it's showing on the emulator.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title> iPhone 6 %amp; 7 will show</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <style>

/* shows the same display on both landscape and portrait */

        /* iPhone 7 in portrait & landscape */
    /* @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) {
        body{
            background-image: url('imgs/P-375px.jpg') 
        }

    } */

/* comment out to only show in portrait */

    /* iPhone 7 in landscape */
    @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) {
        body{
            background-image: url('imgs/L-667px.jpg') 
        }
        .box{
            background:pink;
            width:20%;
            height: 20%;
            padding:5%;
            border: red 2px solid;
            color:green;
        }
    }

/* comment out to only show in landscape */

    /* iPhone 7 in portrait */
    @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) {
        body{
            background-image: url('imgs/P-375px.jpg') 
        }
        .box{
            background:yellow;
            width:20%;
            height: 20%;
            padding:5%;
            border: blue 2px solid;
            color:orange;
        }
    }
        </style>
    </head>
    <body>
        <div class="box"></div>

    </body>
    </html>
Johannes
  • 64,305
  • 18
  • 73
  • 130
cjones
  • 367
  • 1
  • 3
  • 19

1 Answers1

0

Just change min-device-width to min-width and max-device-width to max-width - the pixel values you use in your media queries are actually "css pixels", not "device pixels" (which are twice as much due to retina displays)

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks, but changing min-device-width to min-width and max-device-width to max-width has no effect – cjones Feb 18 '18 at 08:17
  • Sorry guy, but Johannes has assumed a correct answer, but it isn't correct. I've edited min-device-width to min-width and max-device-width to max-width and there's still nothing appearing on the screen. Can someone else chip in please? – cjones Feb 18 '18 at 11:41