Question

我目前正在引导程序（第3版）站点上，遇到高分辨率设备的问题。不幸的是，我无法自己弄清楚这一点，因此希望你们中的任何一个都能提供帮助。

问题是，在分辨率为1920 x 1080P的设备上，站点停止了重新缩放。图像应该几乎完全填满了它们的列，但是确实很小。另外，背景图片无法填充整个屏幕。

我尝试过this JS solution，但是它不起作用，有人知道吗？

这是开头的代码，用于加载视点：

<head>

        <script>  document.addEventListener('load', function() {
                var scale = 1 / (window.devicePixelRatio || 1);
                var content = 'width=device-width, initial-scale=' + scale;

                document.querySelector('meta[name="viewport"]').setAttribute('content', content)
            }, false)</script>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

etc...

这是列中图像的代码（缩短）

  <div class = "hidephone container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row">
                        <p></p>
                        <div class="col-sm-4">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class = "containerimg">
                                        <a href ="itemhome.html"><img alt="Onderwerp " src= "img/onderwerpen/01_Mobiliteit.png" class ="imgow img-responsive"></a>
                                        <a href ="itemhome.html"><img class="overlay" src = "img/titles/01_Mobiliteit.png" /></a>
                                    </div>
                                    <p></p>
                                </div>
                                <div class="col-sm-6">
                                    <div class = "containerimg">
                                        <a href ="itemhome.html"><img alt="Onderwerp " src="img/onderwerpen/02_Cultuur.png" class ="imgow img-responsive"></a>
                                        <a href ="itemhome.html"><img class ="overlay" src = "img/titles/02_Cultuur.png" /></a>
                                    </div>
                                    <p></p>
                                </div>
                            </div>

使用background-image属性将背景图像加载到CSS文件的'body'元素中。

This is how the site looks like on a high-resolution screen (over 1920 x 1080)

This is how it is supposted to look

感谢您的帮助！

Jelle

在高分辨率设备上自动重新缩放引导站点

0 个答案: