如何使滚动网站移动友好？

我已将此website在Internet Explorer，Firefox和Chrome上正常工作。但是，当我尝试通过我的手机访问它似乎摆脱了所有的网站布局搞砸了利润如何使滚动网站移动友好？

这就是它在浏览器上的样子（我希望它看起来像电话或带有某种保证金至少是相似的）：

View in computer browsers

这是用我的三星Galaxy查看网站（正如你可以看到它已经去掉了侧边缘）时，我得到的观点：

View in phone browsers

这里是内容区域（阴影矩形）我的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，但这使问题更加严重。

来源

2013-07-13 smj2393

+1手机屏幕截图 – user1721135

也许你应该使用jQuery Mobile的这一点。 – Viper

ok欢呼@Viper我会看看！ – smj2393

问题可能是您的内容固定在800像素，所以如果您的手机屏幕大约800像素，那么不会有任何侧面留下的空间。

你应该看看CSS的媒体查询，也许手机有不同的内容宽度，所以左侧和右侧仍然有余量。

例

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

}

来源

2013-07-13 18:25:01 user1721135

啊我明白你的意思了！是否会将它从px更改为％的工作？ – smj2393

是的，宽度也同样适用。 – user1721135

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

美达查询是这样 - 这里有一些大小 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

来源

2013-07-13 18:30:33 topiman

这是一个视问题。你不需要改变你的CSS。阅读上视口的位置：

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

来源

2013-07-13 21:10:05 andrewseid

如何使滚动网站移动友好？

回答

相关问题