HTML <style> with media display-mode
HTML <style> with media display-mode
The display-mode value of the media attribute specifies the display mode of the application.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<head>
<style>
p{
color:black;
}
</style>
<style media="screen and (display-mode: fullscreen)">
p{
color:red;
}
</style>
<style media="screen and (display-mode: standalone)">
p{
color:green;
}
</style>
</head>
<body>
<p>display-mode is supported only in mozilla (Press F11 to fullscreen).</p>
</body>
</html>
Devices Value
| Value | Explanation | Fallback display mode |
|---|---|---|
| fullscreen | Total display area is get used. | standalone |
| standalone | In standalone display-mode we can have different window in an application and each window operate all alone. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. | minimal-ui |
| minimal-ui | Much likely to standalone display-mode, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. | browser |
| browser | The application opens in a conventional browser tab or new window, depending on the browser and platform. | none |
Reminder
Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in HTML.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.