Detecting mobile device

Question

I have a basic CSS popup layer that is activated once an image is clicked. I'm having trouble writing the code in which script detects if the individual is viewing the popup layer from a mobile device AND this script is only run "after" the image is clicked to produce the popup layer. My biggest issue i'm running into is that when this scrip is inserted it's automatically running when the page loads instead of when the image link is clicked.

Here is my code so far.

HEADER INJECTION:

<style>
.black_overlay {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.4;
    opacity:.40;
    filter: alpha(opacity=40);
}

.white_content_farm {
    display: none;
    position: fixed;
    top: 10%;
    left: 5%;
    width: 90%;
    height: 71.5%;
    padding: 2px;
    border: 0px solid white;
    background-color: ;
    z-index:1002;
    overflow: hidden;
    opacity:.95;
}

  .white_content_iframe_farm {
    height: 100%;
    border: 5px solid white;
    z-index: 1003;
    opacity: 1;
}
</style>

POPUP LINK:

<a href = "javascript:void(0)" onclick =  "document.getElementById('light_farm').style.display='block';document.getElementById('fade_farm').style.display='block'"><img src="http://static.squarespace.com/static/53bf8132e4b099bf496a13e8/t/54713c07e4b0db0d7897376b/1416707079564/Reach+Website+Icon+500.png" width=50; alt=”OFFERS”></a>

<div id="light_farm" class="white_content_farm">

 <div id="light_iframe_farm" class="white_content_iframe_farm"><iframe src="DOMAIN.COM" width=100% height=100% frameborder=0 ></iframe>    
</div>
</div>

<div id="fade_farm" class="black_overlay">

<a href = "javascript:void(0)" onclick = "document.getElementById('light_farm').style.display='none';document.getElementById('fade_farm').style.display='none'"> <img src="http://static.squarespace.com/static/53bf8132e4b099bf496a13e8/t/548a2d87e4b0a89689922b88/1418341767298/Transparent+Background.png"></a></div>

THE CODE I HAVE TO DETECT A MOBILE DEVICE AND REDIRECT TO THE MOBILE VERSION IS (this is the script that needs to run "only after" the popup layer has been activated by clicking the image):

<script type="text/javascript">
<!-- if (screen.width <= 699) { document.location = "/mobile"; }//-->
</script>

Hopefully one of you is able to tackle this problem!

Thanks,

Jon

ivan_pozdeev · Answer 1 · 2014-12-12T18:52:30.957

0

The only information you can have about a client's environment is what it wishes to tell you in the User-Agent: request header.

Of course, you can try to guess by the set of features supported by the browser but this is inherently unreliable.

Trying to hook on to a browser- (and platform-) specific plugin that would spill more was possible in the browser-war era but is now considered a vulnerability and is actively prevented.

edited Dec 12 '14 at 18:52

answered Dec 12 '14 at 18:40

ivan_pozdeev

33,874
19
107
152

Thank you Ivan for taking time to write back on this problem. In a more specific question, is there a way to write script code (or something similar in use) that the browser only reads when the "onclick" function is performed. I.E. page loads but – user3901815 Dec 12 '14 at 21:23
@user3901815 That can be done, e.g by modifying the page through the DOM (i dunno why it matters to you when the browser reads the code - it normally matters when it executes it). Anyway, that's a completely different question. – ivan_pozdeev Dec 13 '14 at 21:06
Thanks everyone. I was able to work this out by adding a "javascript:doSomething()" to the href link and then created the following script to activate. – user3901815 Dec 14 '14 at 04:21

Detecting mobile device

1 Answers1