如何實現瀏覽器窗口調整大小時縮放的網頁？如何實現瀏覽器窗口調整大小時縮放的網頁？
我可以使用一個表或CSS的float段鋪陳頁面的元素，但我想顯示重新調整時，瀏覽器窗口大小
我使用AJAX PRO和的div有一個可行的解決方案溢出：自動和onwindowresize鉤子，但它很麻煩。有沒有更好的辦法？
感謝大家的答案至今，我打算嘗試所有（或至少大多數），然後使用CSS和百分比選擇爲回答這個線程
的最佳解決方案似乎工作得最好，這是我在原始解決方案中所做的;使用可見性：隱藏div設置爲100％100％提供了一種方法來測量窗口的客戶區[否則在IE中很困難]，並且onwindowresize javascript函數允許AJAXPRO方法在窗口調整大小時重新啓動以重繪在新的分辨率版面細胞內容
編輯：我的道歉不完全清楚;我需要一個'液體佈局'，其中主要元素（'窗格'）會在瀏覽器窗口調整大小時進行縮放。我發現我不得不使用AJAX調用重新調整大小後重新顯示'窗格'內容，並保持溢出：自動打開以避免滾動
而不是在css中使用說「寬度：200px」，使用東西像「寬度：50％」
這使得它在的情況下，使用50％的無論它在，所以：
<body>
<div style="width:50%">
<!--some stuff-->
</div>
</body>
股利將現在總是佔用一半的窗口horizontaly。
這基本上適用於初始佈局，但您必須調整百分比以考慮不同瀏覽器中的邊框，並且還使用由窗口調整大小觸發的Ajax來調整div的內容 – 2009-01-05 04:21:03
除非你在這裏有一些具體的要求，我不知道爲什麼在這裏需要JS。表格佈局是在html中製作流體佈局的簡單（和陳舊的）方式，但是使用css的div佈局也允許流體佈局，請參閱http://www.glish.com/css/2.asp
JavaScript需要在瀏覽器窗口調整大小時刷新內容 – 2008-10-08 02:59:15
聽起來像是想看流體CSS佈局。 對於這方面的資源，只需google流體CSS佈局，應該給你很多東西來檢查。 另外看看this previous question的一些好的指針。
需要考慮的其他事情是JavaScript在窗口大小調整時不會連續更新，因此會出現明顯的延遲/不連續性。使用流暢的CSS佈局，屏幕元素將幾乎立即更新以實現無縫過渡。
JavaScript需要觸發內容刷新，頁面並非全部是靜態的 – 2008-10-08 03:00:23
這很好，我指的是在onresize事件中使用JavaScript。 – Zach 2008-10-27 15:23:29
我看到要做到這一點的最佳方式是使用YUI CSS工具，然後使用百分比來表示一切。 YUI Grids允許各種固定寬度或流體佈局，列大小指定爲可用空間的一部分。有一個YUI Grids Builder來幫助解決問題。 YUI Fonts爲您提供良好的字體大小控件。有一些不錯的cheat sheets可用，告訴你如何放置東西和有用的東西，如什麼百分比指定爲這麼多像素的字體大小。
當瀏覽器窗口調整大小時，這讓您縮放整個網站的定位但縮放，包括字體大小有點棘手。我在想，你將不得不爲此編寫某種瀏覽器插件，這意味着你的解決方案將不可移植。如果你在一個內聯網上，這並不是太糟糕，因爲你可以控制每個客戶端上的瀏覽器，但是如果你想要一個在互聯網上可用的網站，那麼你可能需要重新考慮你的用戶界面。
感謝您的鏈接，非常有趣的工具！ – 2008-09-19 03:31:01
這真的取決於您正在實施的網頁。一般來說，你會想要100％的CSS。當確定包含文本的元素大小時，請注意朝向面向文本的大小，例如em，ex，而不是px。
如果您是CSS新手，浮動是危險的。我不是新人，他們對我仍然有點困惑。儘可能避免使用它們。通常情況下，您只需修改您正在處理的div或元素的顯示屬性。
如果你做了所有這些工作，並且在有更多困難的情況下搜索網頁，那麼當瀏覽器執行此操作時，不僅可以調整頁面大小，而且還可以通過調整文本大小來縮放頁面。基本上，做對了，設計是牢不可破的。我已經看到它在複雜的佈局上完成，但是它有很多工作，在某些情況下儘可能多地編寫網頁。
我不確定你在爲（有趣，有利可圖）這個網站做些什麼，但是我建議你長時間思考如何平衡CSS純度和少數黑客攻擊幫助提高你的效率。您的網站是否有業務需求100％可訪問？沒有？然後擰緊它。做你需要做的事情，先賺錢，然後用你的激情去狂野，做任何額外的事情。
該網站已完成 - 這是爲客戶 - 但回顧它我不喜歡我不得不做的工作 – 2008-09-19 03:32:10
在嘗試本書的解決方案後，我在Firefox或IE中遇到了不兼容問題。所以我做了一些修補，並提出了這個CSS。正如你所看到的，利潤率是所需大小的一半並且是負值。
<head><title>Centered</title>
<style type="text/css">
body {
background-position: center center;
border: thin solid #000000;
height: 300px;
width: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-right: auto;
margin-bottom: auto;
margin-left: -300px;
}
</style></head>
希望幫助
有趣的解決方案，但我不能將身體設置爲固定大小 – 2008-09-19 03:31:36
使用百分比！假設你有一個「主窗格」，所有頁面的內容都位於該窗格上。你希望它始終在窗口的中心位置，以及窗口寬度的80％。
只需執行此操作：
#centerpane { margin：auto; 寬度：80％; }
田田！
感謝您的所有建議！它看起來像我必須做的醜陋的東西是必要的。以下作品（在我的機器上，無論如何）在IE和FireFox中。我可以做的文章了本作的CodeProject.com以後;-)
這個JavaScript雲在<頭>部分：
<script type="text/javascript">
var tmout = null;
var mustReload = false;
function Resizing()
{
if (tmout != null)
{
clearTimeout(tmout);
}
tmout = setTimeout(RefreshAll,300);
}
function Reload()
{
document.location.href = document.location.href;
}
//IE fires the window's onresize event when the client area
//expands or contracts, which causes an infinite loop.
//the way around this is a hidden div set to 100% of
//height and width, with a guard around the resize event
//handler to see if the _window_ size really changed
var windowHeight;
var windowWidth;
window.onresize = null;
window.onresize = function()
{
var backdropDiv = document.getElementById("divBackdrop");
if (windowHeight != backdropDiv.offsetHeight ||
windowWidth != backdropDiv.offsetWidth)
{
//if screen is shrinking, must reload to get correct sizes
if (windowHeight != backdropDiv.offsetHeight ||
windowWidth != backdropDiv.offsetWidth)
{
mustReload = true;
}
else
{
mustReload = mustReload || false;
}
windowHeight = backdropDiv.offsetHeight;
windowWidth = backdropDiv.offsetWidth;
Resizing();
}
}
</script>
的<體>開始了這樣的：
<body onload="RefreshAll();">
<div id="divBackdrop"
style="width:100%; clear:both; height: 100%; margin: 0;
padding: 0; position:absolute; top:0px; left:0px;
visibility:hidden; z-index:0;">
</div>
DIV左浮動佈局。我不得不將高度和寬度設置爲僅佔全部數量（例如99.99％，59.99％，39.99％）的百分比以防止浮動環繞，這可能是由於DIV上的邊界。
最後，內容部分之後，另一個JavaScript塊，以管理刷新：
var isWorking = false;
var currentEntity = <%=currentEntityId %>;
//try to detect a bad back-button usage;
//if the current entity id does not match the querystring
//parameter entityid=###
if (location.search != null && location.search.indexOf("&entityid=") > 0)
{
var urlId = location.search.substring(
location.search.indexOf("&entityid=")+10);
if (urlId.indexOf("&") > 0)
{
urlId = urlId.substring(0,urlId.indexOf("&"));
}
if (currentEntity != urlId)
{
mustReload = true;
}
}
//a friendly please wait... hidden div
var pleaseWaitDiv = document.getElementById("divPleaseWait");
//an example content div being refreshed via AJAX PRO
var contentDiv = document.getElementById("contentDiv");
//synchronous refresh of content
function RefreshAll()
{
if (isWorking) { return; } //no infinite recursion please!
isWorking = true;
pleaseWaitDiv.style.visibility = "visible";
if (mustReload)
{
Reload();
}
else
{
contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
(currentEntity, contentDiv.offsetWidth,
contentDiv.offsetHeight).value;
}
pleaseWaitDiv.style.visibility = "hidden";
isWorking = false;
if (tmout != null)
{
clearTimeout(tmout);
}
}
var tmout2 = null;
var refreshInterval = 60000;
//periodic synchronous refresh of all content
function Refreshing()
{
RefreshAll();
if (tmout2 != null)
{
clearTimeout(tmout2);
tmout2 = setTimeout(Refreshing,refreshInterval);
}
}
//start periodic refresh of content
tmout2 = setTimeout(Refreshing,refreshInterval);
//clean up
window.onunload = function()
{
isWorking = true;
if (tmout != null)
{
clearTimeout(tmout);
tmout = null;
}
if (tmout2 != null)
{
clearTimeout(tmout2);
tmout2 = null;
}
醜陋，但它的工作原理 - 我想它真正重要的東西;-)
使用EMS。 jontangerine.com和simplebits.com都是很好的例子。進一步閱讀 - The Incredible Em & Elastic Layouts with CSS by Jon Tan
<體在onResize = 「resizeWindow（）」 的onload = 「resizeWindow（）」> PAGE </BODY>
/**** Page Rescaling Function ****/
function resizeWindow()
{
var windowHeight = getWindowHeight();
var windowWidth = getWindowWidth();
document.getElementById("content").style.height = (windowHeight - 4) + "px";
}
function getWindowHeight()
{
var windowHeight=0;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body && document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
我目前正在將溶液就寬度而言需要一些改變，否則高度至今工作良好^^
-Ozaki
你的意思是「規模」？你是在談論如何讓佈局變得適合，還是你的意思是增加字體大小/圖像的尺寸？ – nickf 2008-09-18 06:55:30
both - 佈局應該始終填滿屏幕，並且字體大小應該增加或減少以保持比例，並且水平和垂直居中 – 2008-09-18 07:54:13