我的网站在Iphone上无法正常扩展

Question

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

Galaxy Screenshot

Sony Screenshot

但是，在Iphone上，我的布局有两种方式。

1. 菜单没有正确缩放，因此最后一个选项“联系”＆＃39;打破一个新的界限。它不会在任何其他手机上执行此操作，那么为什么要在iPhone上执行此操作？

iPhone screenshot of menu

1. 它会在网站右侧创建一个空白行。我不能很好地解释它，所以这是一个截图

iPhone screenshot of blank bar

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

以下是website

的链接

这是使用

的视口

<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：

使用Alternative CSS：

此外，您需要将height:auto添加到“了解更多”和“开始使用”按钮，以防止它们被拉伸。

编辑注释

你问过菜单分为两行。如果你改变你的填充，它应该解决这个问题。

当前的CSS：

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

使用CSS：

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

Answer 2

您的标题图片太宽。图像本身未正确缩放（或根本不缩放）。查看图像的属性，以下是我看到的尺寸：

410px×75px（缩放到348px×64px）

iPhone屏幕宽度为320px，因此您在侧面悬挂了28个额外像素，导致额外的“空白区域”，导致您进行水平滚动。

Answer 3

移动电话很难处理！

我刚刚看了你的css。您的徽标有一个width: 348px，在调整大小超过应修复它的width:100%之后将其设置为349px。