在調整大小時找到屏幕分辨率
[英]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.