如何在 Laravel PHP 中获取客户端 DOM 宽度

Question

我不知道这是否可行，但如果有任何帮助，我将不胜感激。

如何在 Laravel 中获取客户端的 DOM 宽度？
基本上，有没有办法从 $request 中提取客户端的屏幕宽度？
或者 Laravel 或 Blade 中是否有任何函数可以提供屏幕宽度值？

我知道我可以用 jQuery $(document).width() 获得 DOM 宽度，但我需要服务器端的宽度值；在执行任何 js 之前。

Answer 1

@ArturGrigio 您可以尝试设置 JavaScript cookie 并在 Laravel 中访问它。当用户访问您的网站时，使用 JS (window.width) 获取屏幕尺寸并将其存储在 cookie screen=WxH 中在Laravel$screen = Cookie::get('screen');

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

这是 1 个解决方案。

遗憾的是，无法从 PHP 获取屏幕尺寸信息。您可以尝试使用 User Agent 并检测它是移动设备、台式机还是平板电脑。并为这 3 种类型制作固定尺寸。

不错User Agent package for Laravel

Answer 2

过去一个小时我一直在互联网上搜索，没有找到比黑客和技巧更好的东西。我什至没有找到好的 Node.js cross-OS, cross-Browser 包来解决这个问题...

但对于有类似问题的任何人，这是我的解决方法（尽管我仍然认为可能有更好的方法来达到预期的结果，例如@Froxz）。

可能的解决方案： 我使用了 Ress.io called LazyLoadXT 的一个很棒的 lazy-load 库。

这是一个标准的 img html 标签：

<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（我试图避免），但它是我能想到的最干净的解决方案。

演示：jsFiddle

如何在 Laravel PHP 中获取客户端 DOM 宽度

How to get client DOM width in Laravel PHP

php

width

laravel

blade