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

Posted 2023-03-14

【中文标题】如何使用 javascript 为移动设备调整网站背景？

【英文标题】：How to adjust site background with javascript for mobile device?

【发布时间】：2015-12-10 17:50:28

【问题描述】：

我刚刚为我朋友的歌舞表演完成了我的 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...

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

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

【参考方案1】：

我觉得你可以试试。

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

或

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

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

【讨论】：

这是一个很好的解决方案，谢谢！可悲的是，对于我的网站，它似乎不起作用。使用 Cover，我的图像模糊且太大。使用包含，它不会填满容器。

【参考方案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;。

希望有帮助！

【讨论】：

感谢您的回答！可悲的是，第二个解决方案似乎不起作用......我认为我需要做你的第一个解决方案，但很遗憾，因为我需要处理新图像啊......谢谢！