Targeting IOS Devices only

Design help General
1

Hi there im trying to hide/show certain div elements on ios devices only, tried a few scripts and code snippets to try any target specific elements on iphone/ipad etc but doesnt work. Is there any specific code or feature within webflow that i am missing to get this working?

2

Hi, I don’t coe, but I sometimes use this sript. It detects the OS and in case of mobile OS, it redirects to another page.

<script>
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 window.location.replace("/mobile-portfolio");
 //or window.location = "http://m.tesing.com";
}
</script>

<script>
Webflow.push(function() {
  $('.project-item').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });
  $('.close-panel').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>
3

Thanks Vincent, I will give this a whirl and let you know how I get on.

Many thanks

4

Couldnt get this to work…tried another couple of options but for some reason they dont work either. Basically trying to display a mac button if its being used on IOS device and if its not display another button. Added below script to the HEAD CODE section.

Created a test page here: http://test-elements1.webflow.io/

<script type="text/javascript"> jQuery(document).ready(function ($){ if (navigator.userAgent.match(/(iPod|iPhone|iPad)/i)) { $('a.not-mac-button').hide(); }; if (navigator.userAgent.match(/Android/i)){ $('a.mac-button').hide(); }; }); </script>

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.