Как получить ширину DOM клиента в Laravel Stack Overflow

Я не знаю, возможно ли это, но я был бы признателен за любую помощь.

  • Как получить ширину DOM клиента в Laravel?
  • В принципе, есть ли способ извлечь ширину экрана клиента из $request?
  • Или есть какие-нибудь функции в Laravel или Blade, которые дают мне значение ширины экрана?

Я знаю, что я могу получить ширину DOM с помощью jQuery $(document).width(), но мне нужно значение ширины на стороне сервера; перед выполнением любого js.

1

Решение

@ArturGrigio Вы можете попробовать установить JavaScript cookie и получить доступ к нему в Laravel, Когда пользователь заходит на ваш сайт, получите размер экрана с помощью JS (window.width) и сохранить его в печенье screen=WxH
В Ларавеле $screen = Cookie::get('screen');

$screen = explode("x", $screen);
$width = $screen[0]
$height = $screen[0];

Это 1 решение для этого.

К сожалению, нет способа получить информацию о размере экрана из PHP.
Вы можете попробовать поиграть с User Agent и определить, является ли он мобильным, настольным или планшетным компьютером. и сделать фиксированные размеры для этих 3 типов.

Хороший Пакет User Agent для Laravel

3

Другие решения

Я искал в интернете в течение последнего часа, и я не нашел ничего лучше, чем хаки и трюки. Я даже не нашел хороший кросс-операционный пакет Node.js для решения этой проблемы …

Но для тех, у кого есть подобный вопрос, вот мой обходной путь (хотя я все еще думаю, что мог бы быть лучший способ достигнуть желаемого результата, как @Froxz).

Возможное решение:
Я использовал потрясающую библиотеку отложенной загрузки Ress.io называется LazyLoadXT.

Вот стандартный тег HTML img:

<img src="https://i.stack.imgur.com/5coxi.jpg" width="300px">

Вот оно с LazyLoadXT:

<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ressio.github.io/lazy-load-xt/dist/jquery.lazyloadxt.js"></script>
</head>
<img data-src="https://i.stack.imgur.com/5coxi.jpg" width="300px" src="">

И вот оно с LazyLoadXT + JavaScript:

<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ressio.github.io/lazy-load-xt/dist/jquery.lazyloadxt.js"></script>
</head>
<script>document.write('<img data-src="https://i.stack.imgur.com/5coxi.jpg" width="' + document.documentElement.clientWidth + 'px" src="">')</script>

Это все еще Ajax (которого я пытался избежать), но это самое чистое решение, которое я смог придумать.

DEMO: jsFiddle

1

По вопросам рекламы [email protected]