Как использовать минимальную ширину на мобильном телефоне? - PullRequest
Новая
       36

Как использовать минимальную ширину на мобильном телефоне?

0 голосов
/ 10 ноября 2019

Я не могу понять, почему min-width не работает на мобильном телефоне на моем сайте. Вероятно, есть действительно простое решение для этого, но я ничего не могу найти.

По сути, у меня есть элемент с этим CSS: 

fullscreen {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    min-width: 100%;
    min-height: 100%;
}

Это прекрасно работает в браузерах настольных компьютеров, ввсе разрешения и соотношения сторон, но на мобильных устройствах он полностью разбивается, хотя при изменении min-width на width он отлично заполняет экран на настольном компьютере и мобильном устройстве.

И когда вместо этого я использую heightиз min-height, он работает как положено, и я могу позиционировать элементы с помощью bottom на мобильном телефоне, но при использовании min-height он использует произвольную позицию примерно посередине экрана. max-width и max-height, кажется, также работают правильно

Что еще более странно для меня, так это то, что при использовании «эмулятора» мобильного устройства в Chrome результаты кажутся совершенно случайными, иногда работают, иногда с такимина полпути на том же месте, что и мой настоящий телефон, иногда он находится в совершенно другом месте.

Мой телефон постоянно имеет линию на полпути на том же месте.

Я видел многолюдей рекомендуют использовать мета-тег viewport, и я уверен, что он реализован правильно: 

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Идеальным решением для меня было бы просто повторить то же поведение, что и на рабочем столена мобильном телефоне, поскольку мой настольный сайт уже работает для всех разрешений.

Большое спасибо за вашу помощь, я потратил не менее 3 часов, чтобы выяснить это!

РЕДАКТИРОВАТЬ: Я 'мы пытались реализовать поведение, которое я хочу, в JavaScript, и по какой-то причине он по-прежнему не хочет работать на мобильных устройствах. Вот тест, который я сделал: 

<!DOCTYPE html>

<html>
    <head>
        <title>Mobile fit test</title>
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0">

        <style>
            body {
                margin: 0;
                padding: 0;
                overflow-x: hidden;
                overflow-y: hidden;
            }
        </style>
    </head>

    <body>
        <img id = "fit" src = 'http://placehold.it/1000'>

        <script>
            var image = document.getElementById("fit");
            var image_width, image_height;

            window.onresize = function() {
                console.log(image_width, image_height);

                var width  = 1.0 / window.innerWidth * window.innerHeight / image_height * image_width;
                var height = 1.0;

                if (width < 1.0) {
                    width  = 1.0;
                    height = 1.0 / window.innerHeight * window.innerWidth / image_width * image_height;
                }

                width  *= window.innerWidth;
                height *= window.innerHeight;

                image.style.width  = width  + "px";
                image.style.height = height + "px";

                image.style.position = "absolute";

                image.style.left = window.innerWidth  / 2 - width  / 2 + "px";
                image.style.top  = window.innerHeight / 2 - height / 2 + "px";
            }

            document.body.onload = function() {
                image_width  = image.width;
                image_height = image.height;

                window.onresize();
            }
        </script>
    </body>
</html>

С этим я все еще могу увеличить, window.innerWidth и window.innerHeight не кажутся такими, какими они должны быть, и он все еще отлично работает слюбое разрешение и плагин, который предложил Mileta Dulovic. Это сводит меня с ума!

1 Ответ

0 голосов
/ 10 ноября 2019

Ваш метатег выглядит так, как и должно быть. Если вы не хотите, чтобы пользователь увеличивал страницу, вы можете использовать эту 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Хорошо, так. Медиа-запрос работает следующим образом: 

@media screen and (min-width: 768px) {
...
}

CSS будет применяться только и только на экранах с width >= 768px. На экранах ниже это не будет применяться. 

@media screen and (max-width: 768px) {
...
}

CSS будет применяться только и только на экранах, которые имеют width <= 768px. На экранах выше он не будет применен.

Если я хорошо отвечу на ваш вопрос, у вас возникнут проблемы при использовании min-width с медиа-запросом. Это потому, что вы никогда не говорите ему, что делать на небольших экранах.

Также не слишком доверяйте мобильному представлению Chrome. В большинстве случаев это плохо. Скорее установите плагин для Chrome, который поможет вам в этом.

...