Create a full page image in HTML for iPhone 6s Plus in horizontal mode

I am trying to create a full page image using HTML / CSS for mobile phones (something similar to https://www.w3schools.com/howto/howto_css_full_page.asp).

I drew a Rhombus (actually a square rotated 45 degrees) and placed it into the HTML page. I am expecting the vertices of the Rhombus to touch the border of the page. Here is my code:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0;
                                  maximum-scale=1.0; user-scalable=no">
  <title>FGFSControllerWeb</title>
  <style>
    * {
        box-sizing: border-box;
    }
    html, body {
        height: 100%;
    }
    body {
        margin: 0px;
        padding: 8px;
        overflow: hidden;   /* disable scroll */
    }
  </style>
</head>
<body>
  <img style="height: 100%; width: 100%" src="data:image/png;base64, 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" alt="Red dot" />
</body>

I tested this page using two devices, one is iPhone 6s, another is iPhone 6s Plus.

The page works well in most cases, including on computers (I tested it with Firefox):

iPhone 6s, vertical

iPhone 6s Plus, vertical

iPhone 6s, horizontal

However, for iPhone 6s Plus horizontal mode, it fails:

iPhone 6s Plus, horizontal

Expected (shown in red):

iPhone 6s Plus, horizontal, expected

Why is it happening? Is it possible to use any other techniques (e.g. Javascript) to retrieve the actual height of the browser window?

I also encounter the same problem when following the code in https://www.w3schools.com/howto/howto_css_full_page.asp . I am not sure whether this happens on other iOS devices.

Answer

You can use JS to detect the orientation and height e.g.

var  width = window.innerWidth || document.body.clientWidth,
var  height= window.innerHeight || document.body.clientHeight

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode set width and height here 
   width  =  550+'px';
   width  =  350+'px';
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode set width and height here 
   width  =  550+'px';
   width  =  350+'px';
}