finding screen resolution on resizing
Question
I've been scratching my head about this for a few days now, hope you guys can help.
I need to find out the size of the browser when a page is loaded.
I am writing a PHP page with PHP and javascript. The page starts with this code:
if ( empty($_GET['w']) ) {
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=="CSS1Compat" &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
location.replace("'.$_SERVER['PHP_SELF'].'?w=" + winW + "&h=" + winH );
</script>
</body>
</html>';
} else {
$w = $_GET['w'];
$h = $_GET['h'];
// my main page goes here
}
This code basically gets the resolution and then reloads the page with the width and height sent in the url's query so that PHP can then use those values.
The problem is: when the user resizes his/her window and then reloads the page, the values sent are the old values (because they are still in the URL query).
How can I find new values of width and height every time a page is loaded or reloaded?
Thanks
4 answers
solution1
0 2012-04-26 03:29:38
I am not 100% sure, but you can't stop page from begin reloaded by user interaction. But you can listen to page unload events so that you can do what you need to do.
solution2
0 2012-04-26 03:56:08
How about using jQuery, with polling to a script that will return the value received via GET as json. It will update to any value as the screen is resized with no user interaction!
In my example it just updates the paragraph but you could also do something with the values. (Write less do more ;p)
<?php
if(isset($_GET['width']) && $_GET['height']){
$size = array('width'=>intval($_GET['width']),'height'=>intval($_GET['height']));
echo json_encode($size);
die;
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function poll(){
setTimeout(function(){
$.ajax({ url: "http://localhost/screensize.php?width="+ $(window).width() +"&height="+ $(window).height() +"",cache: false,
success: function(data){
//Do something with returned json
$("#screensize").replaceWith("<p id=\"screensize\">Width:"+ data.width +"px Height:"+ data.height +"px</p>");
//Next poll
poll();
}, dataType: "json"});
// 1/2 a sec
}, 500);
}
$(document).ready(function(){
poll();
});
</script>
<p id="screensize">Updating...</p>
solution3
0 2012-04-26 03:56:33
The problem with this code of yours is that it does absolutely nothing if w and h exist as url parameters. If you look at the source, it'll be blank.
What you should do is to check if the url parameters match with the actual values that the window currently has and then proceed to do whatever it is you plan on doing.
<?php
$w = 0;
$h = 0;
if (isset($_GET['w'])) {
$w = $_GET['w'];
}
if (isset($_GET['h'])) {
$h = $_GET['h'];
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
window.onload = function(event) {
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=="CSS1Compat" &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (winW=='.$w.' && winH=='.$h.') {
document.write("Yay, victory!");
} else {
location.replace("'.$_SERVER['PHP_SELF'].'?w=" + winW + "&h=" + winH );
}
}
</script>
</body>
</html>';
// my main page goes here
?>
solution4
0 2012-06-07 14:28:11
Use Jquery. Roughly something like this should work. Attach a .resize handler to the window.
$(document).ready(function(){
echoWindowDimensions();
$(window).resize(function(){
echoWindowDimensions();
});
});
function echoWindowDimensions {
var h = $(window).height();
var w = $(window).width();
alert('height'+h+' width'+w);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.