android - 我的网站无法在 iPhone 上正确缩放

Question

我正在设计一个响应式网站，它在大多数设备上运行良好。我使用两台不同分辨率的显示器、一台联想平板电脑和两部 Android 手机(galaxy S4 和 sony Xperia)。在所有这些方面看起来都很棒

Galaxy Screenshot

Sony Screenshot

但是，在 iPhone 上，我的布局有两个问题。

1. 菜单无法正确缩放，因此最后一个选项“联系人”换行。它不会在任何其他手机上执行此操作，那么为什么它会在 iPhone 上执行此操作？

iPhone screenshot of menu

1. 它会在网站的右侧创建一个空行。我无法很好地解释它，所以这是一个屏幕截图

iPhone screenshot of blank bar

它在 iPhone 4 simulator 上解决了这两个问题。所以我不认为这只是我测试的一部手机。

这里是 website 的链接

这是我使用的视口(viewport)

<meta name="viewport" content="width=device-width, initial-scale=1">

这是什么原因造成的？

编辑 - 我正在使用的所有媒体查询

    /*Center Logo when on mobile*/
    @media all and (min-width: 0px) and (max-width: 989px){
        #logo{
            text-align:center;
        }
    }
            /*Add margin top on desktops*/
            @media all and (min-width: 990px){
                #navigationPages li{
                    margin-top:25px;
                }
            } 
            /*Remove margin top when on mobile*/
            @media all and (min-width: 0px) and (max-width: 989px){
                #navigationPages li{
                    margin-top:5px;
                }
            }  

            /*Change font size of navigation on mobile*/
            @media screen and (max-width: 468px) {
                #navigationPages li {
                      font-size: .85em;
                }
                #navigationPages li a {
                     padding: 0.75em 0.6em;
                }
            } 
    /*Float icons right on medium sized screens*/
    @media all and (min-width: 628px) and (max-width: 989px){
        #headerIcons img{
            display:block;
            float:right;
            margin-left:15px;

        }
    } 

    /*float left again for phones*/
    @media all and (min-width: 0px) and (max-width: 627px){
        #headerIcons img{
            display:block;
            float:left;
            margin-left:15px;

        }
    } 
                    /*Change font size of navigation on mobile*/
                @media screen and (max-width: 814px) {
                    #cityBackground p {
                    font-size: 25px;
                    text-justify:inter-word;
                    }
                }
            /*Change font size of navigation on mobile*/
                @media screen and (max-width: 623px) {
                    #cityBackground p {
                    font-size: 17px;
                    text-justify:inter-word;
                    }
                }
/*Reduce button sizes on mobile*/
@media all and (max-width: 989px){
    #buttonHolder img{
        width:30%;
        display:block;
        margin-left: auto;
        margin-right: auto;
    }
} 

/*center icons on mobile*/
@media all and (min-width: 0px) and (max-width: 989px){
    #icon1 img{

        display:block;
        margin-left:auto;
        margin-right:auto;
        min-width:162px;
    }
} 

    /*Center titles on mobile*/
    @media all and (min-width: 0px) and (max-width: 989px){
        .whoWhatWhyTitles{
           text-align:center;
           margin-top:25px;
           font-size:32px;
           margin-right:35px;
        }
    } 

    /*Remove padding of text on mobile*/
        @media all and (min-width: 0px) and (max-width: 989px){
            #whoWeAre p{
                margin-top:5px;
                font-size:20px;

                padding-left:0;
                width:99%;
                text-align:center;

            }
        } 

    /*Remove padding of text on mobile*/
        @media all and (min-width: 0px) and (max-width: 989px){
            #whatWeDo p{
                margin-top:5px;
                font-size:20px;
                padding-left:0;
                width:99%;
                text-align:center;

            }
        } 

    /*Remove padding of text on mobile*/
        @media all and (min-width: 0px) and (max-width: 989px){
            #whyChooseUs p{
                margin-top:5px;
                font-size:20px;

                padding-left:0;
                width:99%;
                text-align:center;

            }
        } 

    /*Remove padding of text on mobile*/
        @media all and (min-width: 0px) and (max-width: 623px){
            #footerThin p{
                margin-left:0;
            }
        } 

Answer 1

发生了什么

屏幕变宽的原因是标题根本没有改变。这就是为什么 iPhone 拍摄的照片会从屏幕上消失的原因。好消息是我们根本不需要媒体查询。我们可以将其设置为屏幕的 max-width 为 100%。将下面的代码添加到您的样式表中，并告诉我是否可以解决问题。

代码

CSS:

#logo img {
    max-width:100%;
    height:auto;
}

CSS 替代方案 1:(这将在每一侧提供一点填充)。

#logo img {
    max-width:96%;
    margin:0 auto;
    height:auto;
}

屏幕截图

当前:

使用新 CSS:

使用替代 CSS:

此外，您需要将 height:auto 添加到“了解更多”和“入门”按钮，以防止它们被拉伸(stretch)。

编辑评论

您询问菜单是否会变成两行。如果你改变你的填充，它应该可以解决这个问题。

当前 CSS:

#navigationPages li a {
    display: block;
    padding: 0.75em 1.5em;
}

工作CSS:

#navigationPages li a {
    display: block;
    padding: 0.75em 1em;
}