iphone - 如何为 iPhone 修复我的网站？

Question

这是关于我的页面，这里是GitHub

我一直在使网站具有响应性，甚至使用 protoFluid 之类的工具来查看它，就好像它在 iPhone 上一样。但是，我使用我的 iPhone 并且有很多问题。这些按钮似乎不想改变它们的宽度，即使它们是基于百分比的。它们向右溢出，并在右侧留下一个黑色空间。

.container .name .social div{
        width:  80px;
        display: inline-block;
}
.container .name .social img{
        width: 100px;
}

.social {
        position: absolute;
        display: inline;
        width: 425px;
        left: 0;
        margin-left: 10px;
}
@media only screen and (max-width: 600px) {
    .social {
        padding: 0;
            width: 424px;
        position: relative;
            display: block;
            margin: 0 auto
    }
    .name .social div {
            width: 16.6666667%;
    }
    .social img {
            width: 125%;
            /*width: 100px*/
    }
}
@media only screen and (max-width: 450px) {
        .container .name .social div {
                width: 13.6667%;
        }
        .container .name .social img {
                width: 125%;
        }
}

Answer 1

The buttons stay the same because the percentage width is decided on the size of parent controller. On line 271 of stylesheet.css .social class has width 425px (the same width it has on each screen size) so the buttons stay the same. Try changing width of .social class or simply use pixels for button dimensions for that media-query - @media only screen and (max-width: 600px)

Answer 2

有很多方法可以解决它，包括使用引导框架...我总是使用“resize window”chrome插件（在appstore here中找到），并显示错误。你可以在你的开发环境中工作。