Some scripts work well on desktop but not on mobile. For example, a sticky header that follows visitors down the page can take up too much of a phone screen. This snippet lets you run code only on desktop, only on mobile, or different code on each.
This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing JavaScript.
Add the snippet to your page
- Copy the following snippet:
<script>
if ( lp.jQuery(window).width() <= 600 ) {
// Your mobile code goes here
}else{
// Your desktop code goes here
}
</script>-
Open the JavaScripts section and add a new script.
-
Paste the snippet, set the placement to Before Body End Tag, and give the script a clear name so you and Unbounce Support can identify it later. Placement matters, since it controls where the script runs in relation to the rest of the page and keeps it from interfering with other scripts.
-
Paste the code you want to target into the matching section. For example, to run a sticky header script on desktop and tablet only, paste it where the snippet says
// Your desktop code goes here. Remove the opening and closingscripttags from the code you paste in, since the snippet already has them. - Save and republish the page.
-
Check the page in Preview, or on a computer and a phone, to confirm each version behaves as expected. In this example, the header scrolls with the page on desktop and stays static on mobile.
The snippet treats screens 600 pixels wide or narrower as mobile. You can use it any time a page needs to behave differently on mobile and desktop.