Question

我知道之前已经多次询问过类似的问题，但是我已经搜索了很多问题/答案，找不到适合我特定问题的解决方案。

基本上我有一个响应式网站，它有固定的背景图像 - 图像是1280 x 853像素，它们通过以下css应用于html标签（由于尝试了几种解决方案，目前有点乱） -

html {
  background: url(/content/images/bg_lrg.jpg) no-repeat top center fixed;
  -webkit-background-size: 1024px 768px;
  background-attachment: fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我的想法是应用背景大小 - 如果有效，我会使用媒体查询为ipad / iphone / other应用相关尺寸。

目前在iOS设备中显示的图像非常庞大 - 因为它将自身限制在文档的高度而非视口 - 我知道移动Ios中存在固定背景的许多问题 - 是否有人有解决方案？我的图像可能在哪里视图宽度而不是文档高度？

Answer 1

第一个解决方案，您是否尝试过设置 ViewPort ？在HTML的标题中，您可以包含以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

我会先尝试一下。您甚至可以指定iPhone的宽度。这是最好的解决方案，以使您的设备在手机上正确显示图像的大小。这是一个链接，快速描述了您可以使用ViewPorts做什么：

许多网站将其视口设置为“width = 320，initial-scale = 1”，以便在纵向模式下精确地适合iPhone显示。 Using the viewport meta tag to control layout on mobile browsers

二级解决方案：

如果这不起作用，我会在这些新功能出来之前创建一个经过修改的自定义解决方案。我修改了这个功能，使网站的背景总是填满背景，无论屏幕尺寸如何：

使用JQuery的JavaScript：

//Resize background image function
$(function () {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();

setInterval(function () {
    //Checks for screen resize every hundreth of a second and resizes elements based on that new screen size
    if ((width != $window.width()) || (height != $window.height())) {
        //resets the variables to prevent glitching
        width = $window.width();
        height = $window.height();

        //calls resizing functions
        resizeBg();
    }
}, 100);
});

它调用了这个函数：

function resizeBg() {
var theWindow = $(window),
$bg = $("#bgVideo"),
aspectRatio = 1920 / 1080; //-- This is the aspect ratio (width / height) of the background image. if the video changes size.

//actually apply aspect ratio
if ((theWindow.width() / theWindow.height()) < aspectRatio) {
    $bg.removeClass().addClass('bgheight');
} else {
    $bg.removeClass().addClass('bgwidth');
}
}

在我的CSS中，我有以下类：

.bgwidth {
    width: 100%;
}

.bgheight {
    height: 100%;
}

在你的HTML上，你希望有这样的东西：

 <video id="bgVideo".....

OR

<img id="bgVideo"...

我的背景ID有以下CSS：

#bgVideo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

我希望这会有所帮助。

移动iOS - 修复了背景图像解决方案

1 个答案: