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

如何在Laravel PHP中获取客户端DOM宽度,php,laravel,width,blade,Php,Laravel,Width,Blade,我不知道这是否可能,但我很感谢你的帮助 如何在Laravel中获取客户端的DOM宽度 基本上,是否有一种方法可以从$request中提取客户端的屏幕宽度 或者在Laravel或Blade中是否有任何函数可以为我提供屏幕宽度值 我知道我可以使用jQuery$(document).width()获取DOM宽度,但我需要服务器端的宽度值;在执行任何js之前。@ArturGrigio您可以尝试在Laravel中设置并访问它。当用户访问您的网站时,使用JS(window.width)获取屏幕大小,并将

我不知道这是否可能,但我很感谢你的帮助

  • 如何在Laravel中获取客户端的DOM宽度
  • 基本上,是否有一种方法可以从
    $request
    中提取客户端的屏幕宽度
  • 或者在Laravel或Blade中是否有任何函数可以为我提供屏幕宽度值

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

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

这是一个解决方案

不幸的是,无法从PHP获取屏幕大小信息。 您可以尝试使用用户代理,并检测它是移动设备还是台式机或平板电脑。并为这三种类型制作固定尺寸


好的

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

这是一个解决方案

不幸的是,无法从PHP获取屏幕大小信息。 您可以尝试使用用户代理,并检测它是移动设备还是台式机或平板电脑。并为这三种类型制作固定尺寸


一个好的

在过去的一个小时里,我一直在网上搜索,没有找到比黑客和诡计更好的方法。我甚至没有找到一个好的Node.js跨操作系统、跨浏览器包来解决这个问题

但对于任何有类似问题的人,这里是我的解决方法(尽管我仍然认为可能有更好的方法来实现预期的结果,比如@Froxz)

可能的解决方案: 我使用了一个很棒的延迟加载库

下面是一个标准的img html标记:

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

这里是LazyLoadXT:


这里是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(我试图避免),但它是我所能想到的最干净的解决方案


演示:

在过去的一个小时里,我一直在网上搜索,没有找到比黑客和诡计更好的东西。我甚至没有找到一个好的Node.js跨操作系统、跨浏览器包来解决这个问题

但对于任何有类似问题的人,这里是我的解决方法(尽管我仍然认为可能有更好的方法来实现预期的结果,比如@Froxz)

可能的解决方案: 我使用了一个很棒的延迟加载库

下面是一个标准的img html标记:

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

这里是LazyLoadXT:


这里是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(我试图避免),但它是我所能想到的最干净的解决方案


演示:

您不能这样做。我能想到的最接近的事情是从一个只获取这些信息并将其传递到服务器的页面重定向它们。如果你想知道我为什么需要它:我在我的服务器上使用,它允许我实时调整我的图像大小,如果我知道客户端的屏幕宽度,我可以提供像素完美的图像(对我的场景很重要)。我知道,一旦页面加载,我也可以对图像发出ajax请求,但如果可能的话,我希望避免这种情况。@Sturm我也很担心:(但谢谢你的评论。你不能这样做。我能想到的最接近的事情是将它们从一个只获取此信息并将其传递到服务器的页面重定向。如果你想知道我为什么需要它:我正在服务器上使用,它允许我实时调整图像大小,如果我知道客户端的屏幕宽度,我可以为图像像素完美(对我的场景很重要)。我知道我也可以在页面加载后对图像发出ajax请求,但如果可能的话,我希望避免这种情况。@Sturm我也很担心:(但是谢谢你的评论。谢谢,这是一个聪明的方法,但是在cookie设置之前的第一个请求呢?@ArturGrigio唯一的方法是ajax,所以当用户没有cookie时,如果他来到你的网站(检查php或js),你不加载任何图像,然后发送一个带有新设置的cookie的ajax请求来设置宽度和高度,然后加载所有图像。这应该更快。这是我现在唯一能想到的。谢谢,这是一个聪明的方法,但是在cookie设置之前的第一个请求呢?@ArturGrigio唯一的方法是ajax,所以呢如果一个用户没有cookie(在php或js中检查),他就会访问你的网站,你不加载任何图像,然后用新设置的cookie发送一个ajax请求来设置宽度和高度,然后加载所有图像。这应该更快。这是我现在唯一能想到的。