2

我已经将一个网站上传到我的服务器以在 iphone 上进行测试。但是，页脚在 iPhone 上没有覆盖整个宽度，尤其是在 Safari 网络浏览器上。我相信这与#leaf-print我在#header.

我已经查看了数十篇关于 Stackoverflow 的文章，但仍然无法找到解决方案。该网站位于：www.azumis.com/clients/onaturals。理想情况下，我需要某种 CSS 代码来强制 iPhone 屏幕上的视口宽度为 952 像素。任何帮助将不胜感激。谢谢

在此处输入图像描述

4

2 回答 2

5

您正在使用

html,body{
  width:952 px;
}

将其更改为

html,body{
  width:100%;
  margin:0;
  padding:0;
}

更改后的屏幕截图

问题仍然存在，因为::

虽然你已经做出了改变html,body{width:100%;}，但你又一次覆盖了它

body{
  width:952px; /*..why????..as you have done it after html,body{width:100%;} its overriding the width:100% to width:952px;
}

将其更改为

 body{
   width:100%;
   margin:0;
   padding:0;
   overflow-x:hidden;
 }

并且还使

 #footer{
   width:100%; /*...instead of 1024px;...*/
 }

如果仍然无法正常工作，以下代码可能会对您有所帮助

 #footer{
   width:100%; /*...instead of 1024px;...*/
   position: absolute;
   right: 0;
   left: 0;
 }
于 2013-09-07T13:45:39.710 回答
3

这是一个有点老的问题，但我刚刚收到了一些 HTML 类似的问题，这些 HTML 被发送给我进行修改。这有点让人头疼，但我发现解决方案相当简单。

从<head>

<meta name="viewport" content="user-scalable=no, width=device-width" />

由于您的设计不是响应式的，因此您希望在移动设备上查看时像非响应式网站一样对其进行控制。视口元不是必需的，它会导致元素无法正确填充 100% 屏幕的问题。如果你检查你在 iOS 中呈现的 HTML，你会发现你的 HTML 和 body 标签只占了屏幕的一半。

打开 iOS 模拟器，在模拟器中的 Safari 中启动您的站点，然后打开桌面版 Safari，您将在 Developer 菜单中看到一个 iPhone Simulator 选项，该选项将打开一个实际检查模拟器的检查器窗口。Apple 方面的奇怪实现，但是能够在模拟器中运行 HTML 时检查它对于开发人员来说是一个非常错过的​​功能，所以耶！

希望这能解决您的问题！;)

于 2014-04-09T19:35:05.743 回答