如何調整頁面大小？

即時通訊設計一個網站，我有屏幕分辨率問題。我想擴展我的頁面，但我不能這樣做。如何調整頁面大小？

其自己的網站和21.5 INC MAC畫面：（其完成的，沒有問題） enter image description here

它我的筆記本電腦屏幕1366×768像素的分辨率; enter image description here

我tryed這對CSS;

body, html {height:100%;}

and this on html;

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

文檔類型爲：XHTML 1.0過渡

，但不工作。我該怎麼做？

謝謝！

來源

2012-11-04 Ryliatron

你想如何「縮放」頁面？您是否想要縮小筆記本電腦屏幕上的版本，以便整個頁面始終可見？ –

重複您自己的問題：[我如何擴展我的網站？]（http://stackoverflow.com/questions/13219912/how-can-i-scale-my-website） – Quentin

是的，我想縮小到網站爲我的筆記本電腦屏幕，但它只需要工作在小屏幕上。 – Ryliatron

基本上，你不能以簡單，簡單的方式。

視口標籤和所有僅適用於移動設備（目前），因爲它們加載整個頁面和泛周圍，以不同的方式，以桌面瀏覽器。

大多數網站設計爲垂直滾動，所以CSS迎合真的很好的橫向拉伸，但非常非常糟糕的垂直做同樣的事情。你能做到這一點

的一種方式，是設計各種不同的版本，然後使用媒體查詢來更改屬性不同的高度。

在你的CSS，這看起來像：

#box { 
    width:100px; 
    height:100px; 
    background-color:red; 
} 

@media all and (max-height: 400px) and (min-height: 200px) { 
    #box { 
     background-color:green; 
    } 
}

這將使一個盒子是紅色的，除非屏幕是200像素和400像素高之間。當屏幕尺寸不同時，您可以使用該技術來執行不同的操作。這些日子已得到很好的支持。（http://caniuse.com/#feat=css-mediaqueries-基本上無處不在，但IE8和下）。

另一種方法是使用視口單元（vh而不是px或em），其中1vh =瀏覽器高度的1％。這是超級不好支持現在（http://caniuse.com/#feat=viewport-units-沒有Firefox，沒有歌劇，IE9和以上）。

除此之外，您正在使用javascript來調整圓形菜單的高度，以便縮放。如果你還沒有意識到JS的話，jQuery是需要關注的。

總之，雖然，讓事情變得簡單：

設計的網站，垂直滾動
設計網站，可以不小心滾動，併爲600px的定義不同的行爲，768px，720px，將1080px高位擋拆（記得在這裏減去瀏覽器鉻的高度，我猜你可以估計爲100-300px之間的某個地方）

來源

2012-11-04 17:00:39

謝謝，現在我試圖重拍我的CSS。 – Ryliatron

-1

你是否嘗試過元標記視口？

<meta name="viewport" content="width=320">

來源

2012-11-04 16:46:20

沒有工作。：/ – Ryliatron

您正在設置html和body的高度爲100％，但高度和寬度如何的元素ins ide身體？爲了使它們更加流暢，適合所有屏幕尺寸，您必須給出高度和寬度以及幾乎每個元素的填充和邊距百分比。

來源

2012-11-04 17:18:58

如何調整頁面大小？

回答

相關問題