如何使用 javascript 为移动设备调整网站背景？

Question

我刚刚为我朋友的歌舞表演完成了我的 wordpress 网站。我做了一些 Javascript 来自定义背景图像并使每个页面彼此不同。 这是它在我电脑上的样子。 Example of my website on Firefox - Windows 7

我的问题是，说到我的 iPhone，结果真的不一样...... Example on my iPhone using Safari for iOS9

如您所见，移动设备上的宽高比真的很难看。 这是我在此页面上用于自定义背景的代码：

<script>
document.body.style.backgroundImage = "url('http://cabarettapisrouge.xyz/wp-content/uploads/2015/11/12235379_10207180605785211_985692315_o-e1447975745789.jpg')"; 
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize= "100% 100%";
</script>

所以，你看到了吗，我在宽度和高度上使用 100% 的比例来调整我的图像，但它在移动设备上不是很好，因为屏幕不同。所以我知道。

有没有办法我可以使用外部 javascript 并对它说“如果在移动设备上，那么就这样显示”？这部分我不太擅长 Javascript...

即使它不是一个外部文件，也许我可以只使用我的代码来使其工作？

无论如何，谢谢你的帮助，我很确定你们都能帮助我！谢谢！

Answer 1

我觉得你可以试试。

    document.body.style.backgroundSize= "cover";

或

    document.body.style.backgroundSize= "contain";

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

如何在 css 中使用 @media 并根据每个设备或视图加载一个或另一个图像？ （请注意，'480px' 是示例，您也可以添加查询来处理横向或纵向视图，或更多分辨率）。

@media (max-width: 480px) and (orientation: landscape) {  
        background-image: url('url to smaller image here...')";
    }

或者根据设备改变背景样式为：

@media (max-width: 480px) and (orientation: landscape) {  
    background-size: 100% auto;
}

或者在背景图片上尝试 CSS width: 100%; height: auto;。

希望有帮助！