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?

Answer: 
using jquery you can get the viewport size.

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

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

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewportSize"></div>
```
[The `<picture>` element](https://developer.mozilla.org/en/docs/Web/HTML/Element/picture) 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>

```

Further reading:

* [Built-in Browser Support for Responsive Images](http://www.html5rocks.com/en/tutorials/responsive/picture-element/)
* [Specification](https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element)
* [Media Queries (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)