在调整大小时找到屏幕分辨率
[英]finding screen resolution on resizing
问题描述
我已经为此花了几天的时间，希望你们能有所帮助。
加载页面时，我需要找出浏览器的大小。
我正在用PHP和javascript编写一个PHP页面。 该页面以以下代码开头：
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
}
这段代码基本上可以获取分辨率，然后使用url查询中发送的宽度和高度重新加载页面，以便PHP可以使用这些值。
问题是：当用户调整窗口大小然后重新加载页面时，发送的值是旧值（因为它们仍在URL查询中）。
每次加载或重新加载页面时，如何找到宽度和高度的新值？
谢谢
4 个解决方案
解决方案1
0 2012-04-26 03:29:38
我不确定100％，但是您无法阻止用户互动开始重新加载页面。 但是您可以侦听页面卸载事件，以便可以执行所需的操作。
解决方案2
0 2012-04-26 03:56:08
如何使用jQuery，并轮询一个脚本，该脚本将返回通过GET接收的值作为json。 屏幕调整大小时，它将自动更新为任何值，而无需用户干预！
在我的示例中，它只是更新了段落，但您也可以对值进行处理。 （少写多做； 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>
解决方案3
0 2012-04-26 03:56:33
您的这段代码的问题在于，如果w和h作为url参数存在，它绝对不会执行任何操作。 如果您查看源代码，它将为空白。
您应该做的是检查url参数是否与窗口当前具有的实际值匹配，然后继续执行您计划要执行的操作。
<?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
?>
解决方案4
0 2012-06-07 14:28:11
使用Jquery。 大致上这样的事情应该起作用。 将.resize处理程序附加到窗口。
$(document).ready(function(){
echoWindowDimensions();
$(window).resize(function(){
echoWindowDimensions();
});
});
function echoWindowDimensions {
var h = $(window).height();
var w = $(window).width();
alert('height'+h+' width'+w);
}
从分辨率集中查找最大分辨率
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.