Create a full page image in HTML for iPhone 6s Plus in horizontal mode
Question
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):
However, for iPhone 6s Plus horizontal mode, it fails:
Expected (shown in red):
Why is it happening? Is it possible to use any other techniques (eg 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.
1 answers
solution1
1 ACCPTED 2021-01-02 10:09:04
You can use JS to detect the orientation and height eg
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';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.