Question

我为我的网站创建了一个测试页面，几乎可以删除所有内容，但仍无法摆脱iPhone或iPad上的20px左右的填充。

请参阅https://lacrafts.worldsecuresystems.com/test的测试页。

我已尝试过媒体样式，删除填充等等。非常感谢任何帮助。

<body id="sub_body" data-twttr-rendered="true">
     <div id="site_wrap" class="clearfix">
          <div id="header-wrap" class="clearfix">
            <div id="header" class="clearfix">dasd<br>fdsfds<br>jhkljklj<br></div>
     </div>
</body>

以下是相关的HTML样式：

body {
    margin:0;
    padding:0;
    font-family:Calibri, Tahoma;
    font-size:14px;
    color:#1d1d1d;
    background:#ee2505;
    font-weight:regular;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#site_wrap {
    border-top:8px solid #1d1d1d;
    background-color:#ffffff;
    width: 100%;
    margin:0;
    padding:0;
}

#header-wrap {
    background-color:#ffffff;
    width:100%;
    margin:0;
    padding:0;
}
#header {
    width:1000px;
    margin:0 auto;
}

/* *********************** CLEARFIX **************************** */

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

Answer 1

我在移动开发方面遇到过类似的问题。我发现将包含整个内容的div添加到我的页面是有用的，并将其样式设置为：

{
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
}

网站在iPhone和iPad上显示20px填充iPad的

1 个答案: