How to detect if web app running standalone on Chrome mobile

by

This answer comes with a huge delay, but I post it here just for other people who are struggling to find a solution.

Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone:

Using CSS:

@media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
}

Using both CSS and Javascript:

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

If you need more information, Google Developers has a page dedicated to this topic: https://developers.google.com/web/updates/2015/10/display-mode

More Related Contents:

  1. Removing address bar from browser (to view on Android)
  2. Are there any standards for mobile device web browsers in terms of thread sleeping? [closed]
  3. iScroll 4 not working with form element iPhone Safari and Android browser
  4. Prevent Address-Bar hiding in mobile Browsers
  5. Is it possible to control the camera light on a phone via a website?
  6. screen styling when virtual keyboard is active
  7. JavaScript how to check User Agent for Mobile/Tablet
  8. Force hide address bar in Chrome on Android
  9. Is it possible, in JavaScript, to detect when the screen is turned off in the Android & iOS browsers
  10. JavaScript halts in inactive android Chrome tab
  11. How to wait until an element exists?
  12. Chrome doesn’t delete session cookies
  13. How do I load an HTML page in a div using JavaScript?
  14. How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
  15. Android Calling JavaScript functions in WebView
  16. “Uncaught TypeError: a.indexOf is not a function” error when opening new foundation project
  17. How to getting browser current locale preference using javascript?
  18. getUserMedia() in chrome 47 without using https
  19. \u200b (Zero width space) characters in my JS code. Where did they come from?
  20. JavaScript keypress event not raised on Android browser
  21. Animated gif only loops once in Chrome and Firefox
  22. Facebook: Unsafe JavaScript issue (document.domain values should be same)
  23. Difference between onbeforeunload and onunload
  24. Choosing Mobile Web HTML5 Framework [closed]
  25. google chrome extension :: console.log() from background page?
  26. Does React Native compile JavaScript into Java for Android?
  27. How to fix chrome-extension inline JavaScript invocation error?
  28. Chrome extension identity.email empty
  29. Chrome Extension get selected text
  30. Access-Control-Allow-Origin Error At Android 4.1

Leave a Comment