Question

我一直在使网站响应，甚至像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

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

Answer 2

按钮保持不变，因为百分比宽度取决于父控制器的大小。 stylesheet.css .social类的第271行的宽度为425px（每个屏幕大小的宽度相同），因此按钮保持不变。尝试更改.social类的宽度，或者只使用像素作为该媒体查询的按钮维度 - @media only screen and (max-width: 600px)

如何修复iPhone的网站？

2 个答案: