响应式网站无法在较小的屏幕分辨率下拥有100％的宽度

Question

在移动设备上查看http://rayku.com时（iPhone 5分辨率或更低分辨率），有一个水平滚动条 - 如何最大化内容宽度，以便没有水平滚动条？ http://d.pr/i/epmI

css中没有任何最小宽度。

Answer 1

滚动归因于视频容器button内.myVideoCont的左边距。

如果您需要将按钮居中对齐视频，请使用 left:50%; transform: translateX(-50%);。并避免留下边距。

Answer 2

Use this CSS to target screens below a tablet size, decrease the max-device-width pixels to only target smaller devices:



@media only screen and (max-device-width: 1024px) {

    #mainContainer {
        max-width: 90%; //also try "width: 90%" 
    }   
}


If this doesn't work try setting the width to 80% and keep decreasing until it fits.