在水平模式下以 HTML 创建整页图像 iPhone 6s Plus

Question

我正在尝试使用 HTML / CSS 为手机创建整页图像（类似于 https://www.w3schools.com/howto/howto_css_full_page.asp）。

我画了一个菱形（其实是一个旋转了45度的正方形）放到了HTML页面。我期待菱形的顶点触及页面的边框。这是我的代码：

<!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>

我用两个设备测试了这个页面，一个是iPhone6s，另一个是iPhone6s Plus.

该页面在大多数情况下运行良好，包括在计算机上（我使用 Firefox 对其进行了测试）：

但是，对于iPhone 6s Plus水平模式，它失败了：

预期（以红色显示）：

为什么会这样？是否可以使用任何其他技术（例如Javascript）来检索浏览器的实际高度window？

我按照https://www.w3schools.com/howto/howto_css_full_page.asp中的代码也遇到了同样的问题。我不确定这是否发生在其他 iOS 设备上。

Answer 1

您可以使用 JS 检测方向和高度例如

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';
}

在水平模式下以 HTML 创建整页图像 iPhone 6s Plus

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

html

css

iphone

ios