我知道类似的问题曾经被问过好几次,但是我已经仔细研究了很多问题/答案,找不到适合我的具体问题的解决方案。
基本上我有一个响应的网站,它有固定的背景图片-图片是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中有很多固定背景的问题——有人有解决方案吗?在哪里我的图像可以被压缩到视窗宽度而不是文档高度?
最佳答案
第一个解决方案,你试过设置你的视窗吗?在HTML的头部,您可以包括以下内容:
<meta name="viewport" content="width=device-width, initial-scale=1">
我会先试试。你甚至可以指定iphone的宽度。为了让您的设备在手机上正确显示图像大小,这是最好的解决方案。下面是一个链接,其中快速描述了如何使用视口:
许多站点将其视窗设置为“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".....
或者
<img id="bgVideo"...
我的背景ID有以下CSS:
#bgVideo {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
我希望这能有帮助。