I am trying to get the Browser Viewport bay passing a Javascript Variable to PHP with the following code:
First Code
<?php
if (isset($_GET['width']) AND isset($_GET['height'])) {
// output the geometry variables
echo "Screen width is: ". $_GET['width'] ."<br />\n";
echo "Screen height is: ". $_GET['height'] ."<br />\n";
} else {
// pass the geometry variables
// (preserve the original query string
// -- post variables will need to handled differently)
echo "<script language='javascript'>\n";
echo " location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
. "&width=\" + screen.width + \"&height=\" + screen.height;\n";
echo "</script>\n";
exit();
}
?>
The above code gives me the Screen Width and the Height and this works fine in all browsers including IE6, 7 and 8 too.
But the moment I change it to from screen.width
to window.innerWidth
and screen.height
to window.innerHeight
like this . "&width=\" + window.innerWidth + \"&height=\" + window.innerHeight;\n";
It works fine in all browsers but for IE6, 7 and 8 it says
Screen width is: undefined
Screen height is: undefined
While surfing the net for solutions I found another piece of code:
Second 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;
document.write('<p>Your viewport size is '+x+' x '+y+'</p>');
</script>
This code displays the Browser Viewport and it works fine in all browsers including IE6, 7 and 8 too.
When I run both the codes together in a php file the first one shows as undefined
abd the second one works perfectly. Please see the screenshots below
I am not a newbie programmer and not able to connect the second code to the first logic. Kindly help me do so.
Here are the screen shots of all browsers:
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Internet Explorer 9
Forefox
Google Chrome
Opera
Safari
window.innerHeight/Width are not supported by IE8 and lower. Try using document.documentElement.clientHeight/document.documentElement.clientWidth