HTML div在iPhone中没有覆盖100％的宽度

时间：2013-09-07 13:28:10

标签： html iphone ios css

我已将网站上传到我的服务器，以便在iphone上进行测试。但是，页脚没有覆盖iPhone的全宽，特别是在Safari Web浏览器上。我相信这与#leaf-print中我所拥有的绝对定位的DIV #header有关。

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

enter image description here

2 个答案:

答案 0 :(得分：5)

您正在使用

html,body{
  width:952 px;
}

改变它

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

SCREENSHOT AFTER THAT CHANGE

仍然存在问题，因为

虽然您已经进行了更改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;...*/
 }

如果IT仍未运行，则以下代码可能有助于您 

 #footer{
   width:100%; /*...instead of 1024px;...*/
   position: absolute;
   right: 0;
   left: 0;
 }

答案 1 :(得分：0)

这是一个古老的问题，但我遇到了一些与发送给我修改的HTML相似的问题。它花了一些头脑，但我发现解决方案相当简单。

从<head>

中删除此行 
<meta name="viewport" content="user-scalable=no, width=device-width" />

由于您的设计没有响应，因此您希望在移动设备上查看时将其控制为非响应式网站。视口元素不是必需的，并且导致元素未正确填充100％屏幕的问题。如果您检查HTML在iOS中呈现时，您会看到HTML和HTML body标签只填充屏幕的一半。

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

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

相关问题
最新问题