Manipulate iframe src based on type of device

Hi, on the Tactics page of my website http://chess-instructor.com, I'm using an iframe to display a javascript-based chess app. How can I leverage your framework so that when my website is being viewed on an iphone or android device, I can display a smaller view of the app? I was envisioning something like the following code, but it doesn't work:

<script type="text/javascript">
var uagent = navigator.userAgent.toLowerCase();
if (uagent.search("iphone") > -1) {
   document.getElementById('myiframe').src = "/chess-puzzles/demo-tactic-training-280.html";
else
   document.getElementById('myiframe').src = "/chess-puzzles/demo-tactic-training-400.html";
}
</script>

I would appreciate your guidance and assistance. Thank you! Cesar R