时间戳

首页 > 解决方案 > IOS应用背景全尺寸不覆盖全

html - IOS应用背景全尺寸不覆盖全

问题描述

我正在通过带有 html 和 css 的 phonegap 开发 IOS 应用程序

但背景有问题。您可以在该附件屏幕截图中看到底部和横幅有黑色区域出现 altouhg 图像足够大（1238 * 2208）

这是我下面的完整 html 和 css 代码。你可以在这里看到我的完整 html 页面 http://trakya.hybridsoftware.net/Mobile1/index.html 在此处输入图像描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/font-awesome.min.css" />
  <link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
    <link rel="stylesheet" href="css/style.css" />
      <style>
     html{
        background: url('images/acilis-logo.png') 0 0 no-repeat fixed;
         background-size:cover;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;

    }
     </style>
</head>
<body>
    <div class="container" style="position:absolute;align:center; vertical-align:middle;top:90%" > 

  <div class="col-md-12 col-sm-12 col-xs-12" style="bottom:%24px;margin:">


      <div class="column1"><img onclick="SetTurkish()" title="Türkçe" src="images/turk-logo.png"></div>
      <div class="column1"><img onclick="SetEnglish()" title="English"  src="images/amerika-logo.png"></div>
      <div class="column1"><img onclick="SetGreece()"  title="ελληνικά"  src="images/yunan-logo.png"></div>

      <div class="column1"><img onclick="SetBulgarian()" title="български" src="images/bulgar-logo.png"></div>
    </div>

       </div>


</body>
</html>

该代码有什么问题？

标签： htmlioscssibm-mobilefirstphonegap

解决方案

这与iOS 11 中引入的视口更改有关。你需要做两件事来解决这个问题：

  1. 更新您的视口元标记：
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

以上是一个示例，您可能需要删除几个属性。viewport-fit=contain如果您不希望您的应用程序扩展到整个屏幕，您也可以选择使用。

  1. 添加启动画面以适应最新 iOS 设备的更大屏幕尺寸。最简单的方法是切换到新的启动故事板图像，有关如何执行此操作的更多信息在cordova-plugin-splashscreen.

cordova-plugin-statusbar如果您的项目中包含最新版本，您可能还必须更新到最新版本。PhoneGap 博客上也有更多相关信息。

推荐阅读