Is it possible to get view-port info in LiveView?

Phoenix Forum Questions / Help
1

It would be great if we can write some of the logic for responsiveness in LiveView.
Is it possible to know what are current viewports’ width and height ?
Then we can create some dynamic things on LiveView side just like what we do with tailwind on client side.

2

Since viewport etc. is from the browser, I guess you have to collect somehow that data with JS and send back that data to your LiveView using pushEvent JavaScript interoperability — Phoenix LiveView v0.18.18

But you might still need to handle a default view for the first rendering and handle its layout using CSS maybe…

Interesting to read more about other ideas…

3

I dealt with a related issue – sending back a canvas element height/width after first render – by piggybacking off of the default "phx:page-loading-stop" event.

For live page navigation via <.link navigate={...}> and <.link patch={...}>, their server-side equivalents push_redirect and push_patch, as well as form submits via phx-submit, the JavaScript events "phx:page-loading-start" and "phx:page-loading-stop" are dispatched on window. Additionally, any phx- event may dispatch page loading events by annotating the DOM element with phx-page-loading. This is useful for showing main page loading status, for example:

// app.js
import topbar from "topbar"
window.addEventListener("phx:page-loading-start", info => topbar.show())
window.addEventListener("phx:page-loading-stop", info => topbar.hide())

source: Live navigation events | JavaScript interoperability — Phoenix LiveView v0.18.18