Question

在阅读了很多文章之后，我已经设法缩小了我的问题范围。但是我仍然对如何解决问题感到困惑。

问题：我有一个index.php文件，在这些div框中有8个div框，名为.fillwindow，显示不同的背景图像＆amp;视频。

该网站在桌面上运行良好（窗口需要大约1680x1050，目前正在处理较小的分辨率）。但是，当在iPhone上观看时，在全屏图像方面存在一些问题。图像似乎非常放大，网站无法使用。（仅在索引页面上，子页面正常 - 在某种程度上。）

根据我的阅读内容，移动iOS的background-size:cover;和background-attachment:fixed;似乎存在问题。所以我尝试将background-attachment设置为scroll，将background-size设置为100% 100%，但这也不起作用。

我在CSS中创建了一个媒体查询，生成video标记display:none;，并在视口小于768像素时显示替换图像。

在header.php文件中

我已附加此元标记<meta name="viewport" content="width=device-width, initial-scale=1">

因此，在摆弄不同的值和属性之后，我仍然无法找到解决方案。

以下是愿意浏览的网站链接。 - www.dejavusake.com.au，这是一个子网页，可在移动设备上查看，以便与index.php进行比较 - www.dejavusake.com.au/portfolio

这是 HTML标记的一部分。

<div class="fillwindow" style="background-image:url('http://dejavusake.com.au/wp-content/uploads/2015/05/Moromi_in_Clothbag.jpg')">
    <div  class="landing__logo">
        <img  class="landing__logo-img" src="http://dejavusake.com.au/wp-content/uploads/2015/04/Deja_Vu_Sake_Co_Wordmark_REV-01.png">
    </div>
</div>

 <div class="fillwindow" id="portfolio" style="background-image:url('http://dejavusake.com.au/wp-content/uploads/2015/05/Steamed_Rice.jpg')">
    <div class="nav-header">
        <img src="<?php home_url(); ?>wp-content/themes/dejavu_theme/images/Portfolio-01.png">
    </div>
    <a href="<?php home_url(); ?>portfolio" class="js-navBtn"><div class="nav-hitstate"></div></a>      
    <div class="img__description"><i class="fa fa-circle circle-style"></i><p> <span style="color:#00ff00">Mushi</span> mai rice steamng, the first task each morning</p></div>         
</div>

<div class="fillwindow" id="styles">
    <div class="fillwindow-videoWrap">  
        <video class="fillwindow-video" autoplay loop muted poster="<?php home_url(); ?>wp-content/themes/dejavu_theme/images/styles-sml.png">
            <source src="http://dejavusake.com.au/wp-content/uploads/2015/06/Rice_Sorting_Compressed.mp4" type="video/mp4" autoplay loop mute />
        </video>
        <img class="sml-replace-img" src="<?php home_url(); ?>wp-content/themes/dejavu_theme/images/styles-sml.png">
    </div>
    <div class="nav-header">
        <img src="<?php home_url(); ?>wp-content/themes/dejavu_theme/images/Styles-01.png">
    </div>
    <a href="<?php home_url(); ?>styles" class="js-navBtn"><div class="nav-hitstate"></div></a>         
    <div class="img__description"><i class="fa fa-circle circle-style"></i><p> <span style="color:#00ff00">Koji room</span> the heart of the sake brewing process</p></div>
</div>

以下是 CSS：

.fillwindow {
   height: 100vh; 
   /*outline: 1px solid red;*/
   background-color: #000;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   position: relative;
   overflow: hidden;
}

移动Safari - 背景图像的位置

0 个答案: