Source: www.amitmerchant.com

How to detect fullscreen mode using CSS

Category: PHP, javascript

· August 22, 2020 · ⋆ CSS And that’s when I came across this CSS media feature display-mode which can be used to test the display mode of an application.

The fullscreen option, as its name suggests, would detect if the device is in the fullscreen mode, and based on that you can apply or alter some CSS.

If you want to perform some JavaScript related weight-lifting when the app switches to fullscreen mode, you can use window.matchMedia() method and attaching a listener to it which will monitor the display-mode changes like so.

If you like what I write and want me to continue doing the same, I would like you buy me some coffees.
Newsletter

Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week

Fathom Analytics | Fast, simple and privacy-focused website analytics. Fathom Analytics | Fast, simple and privacy-focused website analytics.
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future. Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners