0

I have a Javascript code to determine the client's window width and to show desktop adds or mobile adds. If the window is more than 600px, desktop adds are displayed; else mobile adds are displayed. This is the code:

<script type="text/javascript">
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight || e.clientHeight || g.clientHeight;
if (x > 600) {
    var uri = "http://impes.tradedoubler.com/imp?type(js)pool(34434)a(54665)" + new String(Math.random()).substring(2, 11);
    document.write('<sc' + 'ript type="text/javascript" src="' + uri + '" charset="ISO-8859-1"></sc' + 'ript>');
    if (x > 1119) {
        document.write('<br />');
    } else {
        document.write('&nbsp;');
    }

    var uri = "http://impes.tradedoubler.com/imp?type(js)pool(34434)a(4543545)" + new String(Math.random()).substring(2, 11);
    document.write('<sc' + 'ript type="text/javascript" src="' + uri + '" charset="ISO-8859-1"></sc' + 'ript>');
} else {
    document.write('<sc' + 'ript async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></sc' + 'ript><!-- vesion_movil --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-345445454545" data-ad-slot="36543655" data-ad-format="auto"></ins>');
    document.write('<sc' + 'ript>(adsbygoogle = window.adsbygoogle || []).push({});</sc' + 'ript>');
}

</script>

This usually works right, but sometimes, when accessing the web site with a mobile (less than 400px window width), I see the desktop version, and the responsive version is broken. Any idea of why can be happening?

Jonathan
  • 7,345
  • 3
  • 31
  • 63
Manolo
  • 16,729
  • 16
  • 67
  • 115
  • Maybe you should put it inside a `window.onload = function() { ... } `? Also, why 3 different version to detect the width? – putvande Jun 09 '14 at 10:22
  • @putvande - I've tried, but then only the adds are shown, not the rest of the page. – Manolo Jun 09 '14 at 10:28
  • 1
    @putvande - 3 different ways got from http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa/11744120#answer-11744120 – Manolo Jun 09 '14 at 10:31
  • 1
    Did you try [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) ? if no, look at [Media Query Change Detection in JavaScript Through CSS Animations](http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/) and [Device State Detection with CSS Media Queries and JavaScript](http://davidwalsh.name/device-state-detection-css-media-queries-javascript), also would be better if you'll use DOM standard method and properties to create and append new element in to the document, instead of `document.write`. – Givi Jun 09 '14 at 11:22
  • [`document.createElement` MDN](https://developer.mozilla.org/en-US/docs/Web/API/document.createElement) & [`Node.appendChild` MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild) – Givi Jun 09 '14 at 11:24
  • Can we see more of your HTML document? Sometimes all you need is a [viewport META tag](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag). – Greg Burghardt Jun 09 '14 at 12:40
  • @GregBurghardt - This is the web site: http://nosabesnada.com – Manolo Jun 09 '14 at 12:42
  • @ManoloSalsas: I looked through your code, and you are indeed missing a `` tag. Please review the site I linked to in my previous comment. That should resolve your issue. Without this tag, every mobile browser will try to render your page as best it can. Each browser does a lot of guessing, and every browser guesses differently. – Greg Burghardt Jun 09 '14 at 12:58
  • @GregBurghardt - Indeed, I'm using this function: ` `. And the `wp_is_mobile` function exists. – Manolo Jun 09 '14 at 13:04
  • Actually, using `document.documentElement.client[Width|Height]` is what you want. Check out [A Tale of Two Viewports](http://www.quirksmode.org/mobile/viewports.html) at [Quirksmode.org](http://www.quirksmode.org). – Greg Burghardt Jun 09 '14 at 13:11

0 Answers0