When displaying your website inside an app, often times you will want to either display or hide certain elements in the app only.
There are a few different ways of achieving this, the two best approaches when using MobiLoud are described below:
- Create a separate page on your website, to be used in the app specifically, e.g. https://yourwebsite.com/app
- Detect the user agent using Javascript
If you are not familiar with what a user agent is you can find more details clicking here, but to simplify, whenever your browser, or app, makes a request to your website to pull its content, they include a string into it, which looks like this:
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
That string includes details that can be used to identify the system and browser used to perform the request.
Whenever a request is performed from the app, to your website, it will include "canvas" in that string, so it will look like this:
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0 canvas-ios
This allows us to easily detect the app using a small piece of Javascript, as you can see below:
<script type="text/javascript">
// Get the current user agent
const isApp = navigator.userAgent.toLowerCase().indexOf('canvas') > -1;
// Check if the user agent contains the canvas string
if (isApp) {
// Outputs custom CSS in the app only
document.head.innerHTML += '<style>footer, sidebar { display:none !important; }</style>';
}
</script>
