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

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

然而，在iPhone上，我的布局有两种方式

菜单缩放不正确，因此最后一个选项“contact”会断开至新行。它在其他任何手机上都不会这么做，那么为什么它会在iPhone上这么做呢

它会在站点的右侧创建一个空行。我不能很好地解释它，所以这里有一个截图

这两个问题都有，所以我不认为这只是我测试的一部手机

这里有一个链接到

这是我使用的查看端口

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

发生什么事 屏幕变宽的原因是标题根本没有改变。这就是为什么它会在iPhone的屏幕上消失。好消息是我们根本不需要媒体查询。我们可以将其设置为屏幕的

最大宽度
为
100%
。将下面的代码添加到您的样式表中，并让我知道是否修复了它

代码
CSS:

CSS备选方案1：（这将在每一侧提供一点填充）

截图
当前：


使用新CSS：


使用备选CSS：


此外，您还需要在“了解更多信息”和“快速入门”按钮中添加
height:auto
，以防止它们被拉伸

编辑评论
你问菜单要排两行。如果你改变你的填充物，它应该会解决这个问题

当前CSS：

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

工作CSS：

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

发生什么事
屏幕变宽的原因是标题根本没有改变。这就是为什么它会在iPhone的屏幕上消失。好消息是我们根本不需要媒体查询。我们可以将其设置为屏幕的
最大宽度
为
100%
。将下面的代码添加到您的样式表中，并让我知道是否修复了它

代码
CSS:

CSS备选方案1：（这将在每一侧提供一点填充）

截图
当前：


使用新CSS：


使用备选CSS：


此外，您还需要在“了解更多信息”和“快速入门”按钮中添加
height:auto
，以防止它们被拉伸

编辑评论
你问菜单要排两行。如果你改变你的填充物，它应该会解决这个问题

当前CSS：

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

工作CSS：

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

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

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

iPhone屏幕的宽度为320px，因此在屏幕的侧面有28个额外的像素，这会导致额外的“空白”，这会导致屏幕出现水平滚动。
标题图像太宽。图像本身没有正确缩放（或者根本没有）。查看图像的属性，以下是我看到的尺寸：

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

iPhone的屏幕是320px宽，所以你有28个额外的像素悬挂在屏幕的一侧，造成额外的“空白”，这导致你有一个水平滚动。
手机很难使用

我只是看了一下你的css。您的徽标有一个
width:348px
，在它调整大小超过
349px
后，将其设置为
width:100%
，应该可以修复它。
手机很难使用

我只是看了一下你的css。你的徽标有一个
宽度：348px
，当它调整大小超过
349px
后，将其设置为
宽度：100%
，应该可以修复它。
你能发布你正在使用的媒体查询吗？链接也会很有用。上面的帖子有一个到网站的链接。我将编辑帖子以包含媒体查询您可以发布您正在使用的媒体查询吗？链接也会很有用。上面的帖子有一个指向网站的链接。我将编辑文章，包括媒体查询这是一个非常有用的帖子！但愿我能投两次票。我唯一的另一个问题是菜单换行。它在我的安卓手机上做不到。这仅仅是因为我的android手机有更大的屏幕吗？很高兴能帮上忙！是的，问题是所有移动设备都有不同的屏幕宽度。不过我发现，如果我能在电脑屏幕上缩放它，只要我的viewport
meta
标记正确，我就会做得很好。具体到菜单，我通常做的一件事是将菜单更改为下拉菜单。我设计IndyGreekFest.org就是为了做到这一点，打开它并调整大小。该菜单将替换为一个下拉菜单
select
。您可以这样做。另一个选项是更改菜单的
字体大小
或
填充
或
边距
。我会看一看，看看能不能把它调整到合适的位置。编辑：我添加了一个填充调整，应该可以解决这个问题。这是另一个很好的解决方案。非常感谢你！这是一个非常有用的帖子！但愿我能投两次票。我唯一的另一个问题是菜单换行。它在我的安卓手机上做不到。这仅仅是因为我的android手机有更大的屏幕吗？很高兴能帮上忙！是的，问题是所有移动设备都有不同的屏幕宽度。不过我发现，如果我能在电脑屏幕上缩放它，只要我的viewport
meta
标记正确，我就会做得很好。具体到菜单，我通常做的一件事是将菜单更改为下拉菜单。我设计IndyGreekFest.org就是为了做到这一点，打开它并调整大小。该菜单将替换为一个下拉菜单
select
。您可以这样做。另一个选项是更改菜单的
字体大小
或
填充
或
边距
。我会看一看，看看能不能把它调整到合适的位置。编辑：我添加了一个填充调整，应该可以解决这个问题
#navigationPages li a {
    display: block;
    padding: 0.75em 1em;
}