Question

我使用angularjs和bootstrap创建了一个应用。内容由后端提供。还有动态图像作为链接。可以从后端请求它们的大小不同width。

问题：在从后端请求数据之前，如何检测用户屏幕max-width ？这样后端会响应较小图像的链接吗？

Answer 1

使用jquery可以获得视口大小。

＆＃13;

var viewport = $(window).width();

$('#viewportSize').html(viewport);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewportSize"></div>

＆＃13;

Answer 2

HTML不会按要求提交屏幕选项。您需要在前端创建一个隐藏字段，并将其与您需要的值一起发送回服务器。在我知道的任何方面，后端都没有办法计算屏幕的宽度。

请参阅此ASP.NET Get Screen Width

Answer 3

The <picture> element允许您根据媒体查询加载不同的内容图像。

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

进一步阅读：

如何根据网站屏幕尺寸从后端请求图像？

3 个答案: