Jump to content

How to code NOT for Mobile devices

BostonBob
BostonBob
in Technical Problems

Featured Replies

Posted

Hello,

I've got some javascript code that I don't want to show to Mobile devices.  How would I code that?

Thanks,

George

Good question. I have the same problem. I want to show different layer ads for moble and desktop view. The best choice for displaying ads is dfp but I haven't found out how to make the dfp responsive ads working for out-of-page ads (like layers).

  • Author

There has to be a easy way to do this .... someone!  ^_^

What do you mean by mobile devices? I assume you mean smaller screens, right? In that case, you can’t hide the code on those devices, since the code is created on the server side, but the screen size can only be checked on the client side. 

You need to use JavaScript to check the screen size and depending on the result execute your custom JavaScript code or not. Like so. 

Yep, the css method of hiding/showing for desktop/mobile is based on screen size so any javascript method of doing the same check would have to mirror that same test.

I've done this before, so when I get back to my personal laptop in a little while I'll dig out the code I used and will post it up.

Here you go (works at page load and then on window resize too) 

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script>
			function check(){
				var w = $(window).width()
				var h = $(window).height();
				if ((w <= 768)) {
					$("#stuff1").hide();
					$("#stuff2").show();
				} else {
					$("#stuff1").show();
					$("#stuff2").hide();
				}
			};
			$(document).ready(function() {
				check();
			});
			$(window).resize(function() {
				check();
			});
		</script>
	</head>
	<body>
		<div id="stuff1">SHOW</div>
		<div id="stuff2">HIDE</div>
	</body>
</html>

 

 

1 hour ago, Daniel F said:

Many provider don't allow to show the advertisement in a hidden container

That's why I use DFP with responsive ad containers. The ad is being loaded after dfp js having checked the screensize.

But I didn't manage yet to use them with layer ads.

Another option - I found this....you could then use the same media matches that are done in the css:

https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia 

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script>
			function check(){
				var m = window.matchMedia("only screen and (max-width: 767px)");
				if (m.matches) {
					$("#stuff1").hide();
					$("#stuff2").show();
				} else {
					$("#stuff1").show();
					$("#stuff2").hide();
				}
			};
			$(document).ready(function() {
				check();
			});
			$(window).resize(function() {
				check();
			});
		</script>
	</head>
	<body>
		<div id="stuff1">SHOW</div>
		<div id="stuff2">HIDE</div>
	</body>
</html>

 

  • Author

Actually I want to do it all in the head of the document.  But I got the information I need.  Thanks so much guys!  I really appreciate it! ^_^  I'm running CometChat along with my boards and I want to be sure that it's turned off when viewed with a phone. ^_^  The built-in "do not show" to mobile devices doesn't work well! ^_^

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

Recently Browsing 0

  • No registered users viewing this page.