Автоматическое изменение масштаба сайтов начальной загрузки на устройствах с высоким разрешением - PullRequest
Новая
       34

Автоматическое изменение масштаба сайтов начальной загрузки на устройствах с высоким разрешением

0 голосов
/ 12 марта 2019

В настоящее время я работаю на сайте начальной загрузки (версия 3) и обнаружил проблему с устройствами с высоким разрешением.К сожалению, я не смог понять это сам, поэтому надеюсь, что кто-нибудь из вас может помочь.

Проблема в том, что на устройствах с более высоким разрешением 1920 x 1080P сайт перестает масштабировать.Изображения должны почти полностью заполнять свои столбцы, но все же они очень маленькие.Кроме того, фоновое изображение не заполняет весь экран.

Я пробовал это решение JS , но оно не работает, у кого-нибудь есть идея?

Это код в голове, загружающий точку обзора: 

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

Фоновое изображение загружается в элемент body в файле CSS с использованием свойства background-image.

Вот каксайт выглядит на экране с высоким разрешением (более 1920 x 1080)

Так выглядит внешний вид

Спасибо за вашу помощь!

Желе

...