2013-05-19 133 views
2

我有一個問題與Android上的CSS與Chrome瀏覽器鉻Android的設置寬度爲100%

我在CSS做的是:

html{ 
max-width: 100%; 
height: 100%; 
width: 100%; 
overflow: hidden; 
position: relative; 
} 

body{ 
background-color: rgba(101,122,151,0.8); 
margin: 0px; 
width: 100%; 
overflow: hidden; 
position: relative; 
} 

header { 
width: 100%; 
min-width: 100%; 
color: yellow; 
font-size: 40px; 
text-align: left; 
} 

,並在JavaScript我outprint的身體和頭

alert($('header').width()); 
alert($('body').width()); 

它顯示我的身體寬度的寬度是980和頭部寬度爲340 ,但我不明白爲什麼。有人能幫我嗎? 謝謝

+0

截圖或複製的鏈接會很好。 – Kinlan

回答

9

當加載移動瀏覽器上的網頁時,瀏覽器將承擔該網站是專爲一個更大的屏幕和提供了比設備更大的視口,以便用戶可以對內容進行放大。

如果您希望設備的寬度,你需要設置哪些是可以做到的視口大小:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

還有更多的信息在這裏:http://docs.webplatform.org/wiki/tutorials/mobile_viewport

0

首先,如果你設置最大寬度:100%,然後寬度:100%意味着寬度將覆蓋最大寬度,所以你可以刪除最大寬度。除了將最小/最大值設置爲與寬度相同的點是什麼?

第二,如果你設置的車身寬度100%,那麼其花費視口的最大寬度。所以問題是視口大小是什麼?

+0

我設置最小寬度,因爲我認爲它可以使用這個而不是寬度,但它不會。 我認爲視口具有瀏覽器窗口的完整大小,因爲主體的寬度是980px,這是瀏覽器窗口的全部寬度。 身體的背景顏色在整個屏幕上,所以身體的寬度爲100% – fsulser

+0

嘗試設置頁邊距:0和邊框:沒有正文和標題。 – sylwia

+0

我改變它們,但沒有幫助 – fsulser

0

你試過設置分寬度到100%的身體?

任何你在HTML和body上使用位置的原因,而不是頭部?