Mobile app landing page with device detection

Design help General
1

Hi,
I want to create a landing page for my mobile apps. I would like to have the same URL, but displaying a specific content for iOS, and a specific content for Android. Then display something generic for all others (web browsers, windows phones etc…). Anyone has a good way to do this ?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

@Olivier_Milcent - Welcome

Webflow does not provide device detection features. Layouts are based on browser viewport.

Since you can embed / include custom code, you should be able to include device detection with any suitable third party script that meets your needs. You would need to write custom code to display or hide elements on the page.

I recommend clients don’t use device detection. It is slow, often wrong, and the need can be mitigated by app / web design. For those that require it, I have used:

and when you are hosting yourself

3

Detecting mobile device using user agent isn’t the best way to check if a user is using a mobile device since user agent strings can be spoofed easily. There is a JavaScript API built-in for detecting media. The JavaScript window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. You can use this method to detect a mobile device based on the CSS media query.

<script>
$(document).ready(function(){
  let isMobileDevice = window.matchMedia("only screen and (max-width: 760px)").matches;
  if(isMobileDevice){
    // The viewport is less than 768 pixels wide
    //Conditional script here
  } else{
    //The viewport is greater than 700 pixels wide
    alert("This is not a mobile device.");
  }
});
</script>

You can use above script to do show/hide elements depending on the screen size.

4

We ran into this question with a client project and created a script to hide any desired element based on the device, OS or browser being used by the site visitor.

Here is a link to the tutorial video that goes through the problem as well as walking you through the solution.

If there are any questions please feel free to tag me!

Happy Friday!