How to request images from backend based on website screen size?

Question

I created an app with angularjs and bootstrap. The content is served by a backend. There are also dynamic images served as links. They can be requested from the backend is different width sizes.

Question: how can I detect the users screen max-width before requesting data from the backend? So that the backend will respond with links to smaller images?

score 1 · Answer 1 · answered Jun 20 '16 at 08:23

1

using jquery you can get the viewport size.

var viewport = $(window).width();

$('#viewportSize').html(viewport);

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

answered Jun 20 '16 at 08:23

xergio

44
6

Wouldn't it be sufficient to just check `$(window).width() < 320` eg if I want to know if screen size if very low? Or is it advised to use a div element? – membersound Jun 20 '16 at 11:10

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

HTML doesnt submit screen options by request. You need to create a hidden field on front end and send it back to server with a value you need with. There is no other way for backend to calculate the width of the screen in anyway that I know.

See this ASP.NET Get Screen Width

edited May 23 '17 at 12:08

Community

1
1

answered Jun 20 '16 at 07:15

Demeter Dimitri

608
8
17

It would be sufficient for the frontend to calculate the width, and send this value in the get query for the content to the backend. – membersound Jun 20 '16 at 07:17

score 0 · Answer 3 · answered Jun 20 '16 at 07:18

0

The <picture> element allows you to load different content images based on media queries.

<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>

How to request images from backend based on website screen size?

3 Answers3