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 ......

即使它不是外部文件，也许我可以通过pimp我的代码使它工作？

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

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并根据每个设备或视图加载一个或另一个图像？（请注意，＆＃39; 480px＆＃39;用于示例，您还可以添加查询来处理横向或纵向视图或更多分辨率。）

@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;。

希望有所帮助！

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

2 个答案: