Question

我有一个使用foundation5响应式css框架构建的本地消防部门的班次日历。在我的浏览器中查看并调整窗口大小时，一切都很有效 示例：

但是，当我在iPhone上查看时，日历天数会被移动一个街区。

这是我的css：

.calRow {
    max-width:100%;
}
.calMonth, .calPrev, .calNext {
    text-transform:uppercase;
    font-weight:bold;
    color:gray;
    font-size:1.7em;
    margin:15px 0;
    text-align:center;
}
.calMonth {
    text-align:center;
}
.calPrev {
    text-align:left;
}
.calNext {
    text-align:right;
}
.pCal ul li {
    text-align:center;
    height:0;
    padding:0 0 14.28571%;
    border-left:solid 1px gray;
    border-top:solid 1px gray;
    position: relative;
}
.pCal ul li:after {
    content:'';
    display: block;
    margin-top: 100%;
}
.pCal ul li dl {
    position:relative;
    padding:0;
    margin:0;
    top:0;
    height:100%;
}

.pCal ul li dl dt {
    padding:0;
    margin:0;
}
.pCal ul li.calHead {
    font-size:0.8em;
    border:none;
    color:gray;
    height:25px;
    margin-bottom:-20px;
}
.calToday {
    border-bottom:0.5em solid lightGrey;
}

.calDay {
    position:relative;
    padding:15%;
    margin:0;
    top:-100%;
}

.calLayer2, .calLayer3, .calLayer4 {
    position:relative;
    padding:0;
}
.calLayer2 {
    top:-200%;
}
.calLayer3 {
    top:-300%;
}
.calLayer4 {
    top:-400%;
}

/*  SHIFT HEIGHT / SIZE STYLES  */

.shift2 {
    height:50%
}
.shift3 {
    height:33.33%
}
.shift4 {
    height:25%
}


/* OVERLAY STYLES  */
.calX img{
    width:100%;
    padding-top:2%;
}
.calCircle img{
    width:100%;
    padding:9% 7%;
}
.calSquare img {
    width:100%;
    padding:7%;
}

.pCal .calDayParts {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.pCal .calDayOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    width:100%;
}
.calLayer1, .calLayer2, .calLayer3 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

有人可以帮我弄清楚为什么会这样或者至少建议一种方法来调试它。

由于

编辑1 JS FIDDLE LINK

GO HERE对于jsfiddle示例 - 在手机上查看同样的问题

旁注，this answer说明了如何通过本地网络使用iPhone连接到Windows PC上IIS的localhost

Answer 1

如果不能亲自检查现场，很难调试。从第一眼看，我会尝试添加一个浮动并清除.calRow类，只要它听起来像（组成日历的行）。

.calRow {
    float: left;
    clear: both;
    width: 100%;
}

请记住，浮动日历行，您最有可能还需要浮动日历容器。

如果这还没有解决问题，那么它很可能与您的绝对定位元素相对于其父元素没有定位。

编辑：如果你有权访问safari，我应该添加一条iPhone和一条线将iPhone插入你的桌面。您可以在桌面上使用safari检查网站，方法是“开发”。＆GT; ＆＃39; iPhone＆＃39 ;. More info on remote debugging here.

Answer 2

好，所以问题不在于css。我的风格还有其他风格。我把这个css放在一个angular2组件和“encapsulated”css中，然后它没有定位错误。它将代码包装在shadow dom

中

我从来没有发现我的出血风格，但问题现在已经解决了。

响应式div块无法在移动设备上正确对齐

编辑1 JS FIDDLE LINK

2 个答案: