网站在移动设备上渲染视口

Question

我今天建立了一个新网站：www.domanage.co.il。当我在我的电脑上查看它时，所有视口尺寸都看起来很好。当我尝试在我的iPad或iPhone上查看它时，似乎该网站是某种方式＆＃34;内部＆＃34;视口的右侧。

照片（使用browserstack拍照，但也已在iPad和iPhone上查看过）：

我使用Bootstrap作为我的主要CSS，我已经覆盖了我自己的CSS文件，可以在这里找到： http://pastebin.com/7v0Y7Uim

为什么会发生这种想法？

Answer 1

您有一些元素太宽而无法容纳在容器中，这会导致问题。

@media(max-width: 500px){
    .websites img, .applications img {
        width:150px;
        height:150px;
    }
    .btn-fixed-size {
        width:150px;
    }
    .btn-vlg {
        padding: 10px 5px;
    }
    .btn-fixed-size {
        width:145px;
    }
}

.col-xs-6（这些元素＆＃39;容器）在320px宽视口上的内容只有120px的空间。您正尝试将150px宽的元素放入120px宽的容器中。根据经验，我尽量避免在我的CSS中为响应式网站修复基于像素的宽度。对于图片，只需将其设置为max-width: 100%和height: auto即可自动调整大小。