Как я могу получить ширину экрана (или ширину окна) в PHP как можно скорее? - PullRequest
Новая
       0

Как я могу получить ширину экрана (или ширину окна) в PHP как можно скорее?

0 голосов
/ 24 сентября 2019

Прежде всего, если есть лучший способ, я открыт для предложений.

Мне разрешено изменять внешний интерфейс, но не внутренний (код CMS).У каждой подстраницы сайта есть изображение, которое загружается вверху страницы, просто под панелью навигации (после header.php).Я могу выбрать изображение в CMS, и его путь сохраняется в базе данных.

Итак, скажем, изображение (1920x1080) называется «image.jpg».Мне нужно загрузить изображение с измененным размером (640x360), которое я обычно называю «image.mob.jpg» (и хранится в том же месте на сервере, что и оригинальный «image.jpg»), когда изображение загружается на мобильное устройство (на самом деле, когдаширина экрана меньше или равна 640px - я выбрал число, возможно, было бы лучше использовать 480px или 360px).

Что я сейчас делаю

HTML 

<body>
    ...

    <?php
        ...
        while ($row = mysqli_fetch_array($result)) {
            if (isset($_SESSION['screen_width']) && ($_SESSION['screen_width'] <= 640)) {
                // change "path/to/image.jpg" to "path/to/image.mob.jpg"
                $row['image'] = substr($row['image'], 0, -4).".mob".substr($row['image'], -4);
            } ?>

    <div class="image" style="background-image: url('<?=$row['image']?>)"> ... </div>
    ...

    <?php
        if (isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])) {
            // echo 'Screen width: ' . $_SESSION['screen_width'];
        } else if (isset($_REQUEST['width'])) {
            $_SESSION['screen_width'] = $_REQUEST['width'];
            header('Location: ' . $_SERVER['PHP_SELF']);
        } else {
            echo '<script type="text/javascript">window.location.href = window.location.href+"?width="+screen.width;</script>';
        }
        // echo $_SESSION['screen_width'] = "<script>document.write(screen.width)</script>"; ?>

</body>

Это несколько упрощено, но в основном так и происходит.При первом посещении ширина не сохраняется в $_SESSION, поэтому он загружает большой файл «image.jpg».Но прежде чем он действительно загрузит его, он уже выполняет javascript и перезагружает страницу с $_GET переменной шириной в URL.Все посещения, кроме первого, уже имеют ширину, сохраненную в сеансе, поэтому URL всегда снова оптимизирован для SEO.Кроме того, путь к изображению переименовывается, и сайт загружает файл «image.mob.jpg», если ширина экрана не более 640 пикселей.

Это прекрасно работает.

Проблема в том, что мне нужны все URL сайтаSEO всегда дружественен, поэтому запрещается иметь его "https://seo -friendly.url? = Width = {screen.width}", даже если только один раз.

Как вы можете видеть в последней закомментированной строке, я также пытался использовать echo $_SESSION['screen_width'] = "<script>document.write(screen.width)</script>";, но, очевидно, он не работает при загрузке первой страницы, поскольку весь PHP выполняется перед любым JavaScript.

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

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 24 сентября 2019

Как отметил @Paflow, делать это в PHP - ненужная стычка, а не рекомендуемый или подходящий способ сделать это.

Практически невозможно получить окно просмотра по HTTP-запросу GET,Есть определенные хакерские способы достижения этого, но им нужны какие-то дополнительные запросы через JS.

Ваш лучший вариант - использовать HTML .

srcset покроет вас!

Я бы предложил что-то вроде: 

<img srcset="/image.jpg 640w" sizes="100vw" src="/image.mob.jpg" alt="Alt attribute. Fill me!">

По умолчанию будет загружено image.mob.jpg изображение, которое будетзатем служил в качестве основного базового изображения, и если ваш браузер поддерживает srcset и область просмотра больше 640px, вы получите изображение /image.mob.jpg.

Скажем, вы хотите больше размеров, тогда все, что у вас есть, эточтобы добавить их в атрибут srcset и указать разные размеры: 

<img srcset="/image-huge.jpg 1990w, /image-big.jpg 1440w, /image.jpg 640w" sizes="100vw" src="/image.mob.jpg" alt="Alt attribute. Fill me!">

MDN-реагирующие изображения

0 голосов
/ 24 сентября 2019

Хотя ответ @avcajaraville в целом очень полезен, именно комментарий @Paflow помог мне найти решение.JavaScript не задействован.

HTML 

<?php
    ...
    while ($row = mysqli_fetch_array($result)) {
        $mobile_image_path = substr($row['image'], 0, -4).".mob".substr($row['image'], -4);
        $image_id = "banner-image-" . $row['id_banner']; ?>

<style>
    #<?=$image_id?> {
        background-image: url('<?=$row['image']?>');
    }
    @media (max-width: 640px) {
        #<?=$image_id?> {
            background-image: url('<?=$mobile_image_path?>');
        }
    }
</style>
<div class="image" id="<?=$image_id?>"> ... </div>

Сначала я использовал <style type="text/css" scoped>, но потом я прочитал scoped устарело и использование только <style> внутри <body> разрешено.

Не самый причудливый способ, но он работает!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...