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

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.

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…

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 =>
window.addEventListener("phx:page-loading-stop", info => topbar.hide())

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