如何使滾動網站移動友好？

Question

我已將此website在Internet Explorer，Firefox和Chrome上正常工作。 但是，當我嘗試通過我的手機訪問它似乎擺脫了所有的網站佈局搞砸了利潤

這就是它在瀏覽器上的樣子（我希望它看起來像電話或帶有某種保證金至少是相似的）：

這是用我的三星Galaxy查看網站（正如你可以看到它已經去掉了側邊緣）時，我得到的觀點：

這裏是內容區域（陰影矩形）我的CSS代碼：

.content { 
    width:800px; 
    height:auto; 
    margin:6% auto; //I think it is to do with this 
    position:relative; 
    background-color:black; 
    opacity: 0.75; 
    -moz-border-radius-bottomright: 10px 10px; 
    border-bottom-right-radius: 10px 10px; 
    -moz-border-radius-bottomleft: 10px 10px; 
    border-bottom-left-radius: 10px 10px; 
    -moz-border-radius-topright: 10px 10px; 
    border-top-right-radius: 10px 10px; 
    -moz-border-radius-topleft: 10px 10px; 
    border-top-left-radius: 10px 10px; 
    padding:25px; 
    vertical-align: middle; 
} 

任何想法如何排序了這一點？我試圖將其更改爲px，但這使問題更加嚴重。

Answer 1

問題可能是您的內容固定在800像素，所以如果您的手機屏幕大約800像素，那麼不會有任何側面留下的空間。

你應該看看CSS的媒體查詢，也許手機有不同的內容寬度，所以左側和右側仍然有餘量。

例

@media only screen and (max-width: 767px) { 
.content { 
width:500px; 
margin: 6% auto; 
} 

} 

Answer 2

如上面提到的答案 - 你需要使用@media

美達查詢是這樣 - 這裏有一些大小 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

這是一個視問題。你不需要改變你的CSS。閱讀上視口的位置：

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/