Question

在上一个问题CSS Hardware Accelerated Width中，我提到我正在创建一个Phonegap应用程序，其中包含一个功能，允许您通过移动中间分隔符来更改两列布局的大小。

我正在使用它，但我有一些CSS定位问题。这些问题通常是一个像素，但我肯定只是我的数学结果。基本上，通常设置两列布局以使每一侧均匀。然后，如果移动滑块，它将更改列的left和right值，以增加或减少其宽度。调整大小图标位于这两列之间，随着宽度的变化随着它们移动。

但问题是，当您旋转设备时，中间分隔线会将其定位更改几个像素。要复制问题，您可以：

打开页面
旋转应用
将应用程序旋转回原始位置

或者：

打开应用
移动滑块
旋转应用
将应用程序旋转回原始位置
旋转应用

在每种情况下，中间分隔线将被几个像素关闭，导致它与分界线不正确对齐。

运行大部分内容的JS看起来像这样：

$(window).on('orientationchange', function (e) {
    var page = $("#columnContainer").width();
    var totalWidth = $("#leftColumn").width() + $("#rightColumn").width() + 2;
    var left = $("#leftColumn").width();
    var test = page - ((parseInt($("#leftColumn").css("right")) * page) / 100);
    $("#columnResizeIcon").css({
        "-webkit-transform": "translate3d(" + (left) + "px, 0, 0)",
        "left": "auto",
    });
    if (totalWidth > page) {
        $("#leftColumn").css("margin-right", "2px");
    } else if (totalWidth < page) {
        $("#leftColumn").css("margin-right", "1px");
    }
    if ($("#leftColumn").width() < 100) {
        $("#leftColumn").css({
            "right": 100 - ((100 / page) * 100) + "%",
            "margin-right": "1px"
        });
        $("#rightColumn").css({
            "left": (100 / page) * 100 + "%",
        });
        $("#columnResizeIcon").css({
            "-webkit-transform": "translate3d(100px, 0, 0)",
        });
    }
    if ($("#rightColumn").width() < 100) {
        $("#leftColumn").css({
            "right": (100 / page) * 100 + "%",
            "margin-right": "1px"
        });
        $("#rightColumn").css({
            "left": 100 - ((100 / page) * 100) + "%",
        });
        $("#columnResizeIcon").css({
            "-webkit-transform": "translate3d(" + (page - 100) + "px, 0, 0)",
        });
    }
});
$("div").on("touchmove", "#columnResizeIcon", function (e) {
    e.preventDefault();
    var page = $("#columnContainer").width();
    var left = e.originalEvent.touches[0].pageX;
    var right = page - left;
    if (left > 100 && left < page - 100) {
        $("#leftColumn").css({
            "right": ((right) / page) * 100 + "%",
            "margin-right": "1px",
        });
        $("#rightColumn").css({
            "left": ((left) / page) * 100 + "%",
            "margin-left": "1px",
        });
        $("#columnResizeIcon").css({
            "-webkit-transform": "translate3d(" + left + "px" + ", 0, 0)",
            "left": "auto",
        });
    } else {}
});

CSS：

body{
    background-color:#000;
}

#columnContainer{
    position: absolute;
    bottom:0;
    top:0;
    right:0;
    left:0;
    background-color:#000;
}

#leftColumn{
    position: absolute;
    top:0;
    left:0;
    right:50%;
    bottom:0;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    margin-right: 1px;
}

#rightColumn{
    position: absolute;
    top:0;
    left:50%;
    right:0;
    bottom:0;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    margin-left: 1px;
}

.header{
    position: absolute;
    left:0;
    right:0;
    height:33px;
    z-index: 5;
    background: -webkit-linear-gradient(top, #f4f5f7 0%,#a7abb7 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090, 3px 0 2px rgba(0,0,0,.3);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 17px;
    font-family: Helvetica;
    font-weight: bold;
    letter-spacing: .2px;
    text-align: center;
    padding-top:9px;
    color:#71787F;
    text-shadow: 0 1px 0 #E3E5E9;
    word-break: break-all;
}

.content{
    position: absolute;
    left:0;
    right: 0;
    top:42px;
    bottom: 0;
}

#leftColumn .content{
    background-color:#F5F5F5;
}

#rightColumn .content{
    background-color:#fff;
}

#columnResize{
    position: absolute;
    width:2px;
    top:0;
    bottom: 0;
    left:50%;
    margin-left:-1px;
    background-color:#000;
    z-index: 2;
    display: none;
}

#columnResizeIcon{
    position: absolute;
    z-index: 3;
    width:10px;
    height:30px;
    top:50%;
    bottom:50%;
    margin-top:-15px;
    left:50%;
    margin-left:-7px;
    border-left:2px solid #000;
    border-right:2px solid #000;
}

#leftColumn,
#rightColumn {
  -webkit-transform: translate3d(0,0,0);
}

HTML：

<div id="columnContainer">

    <div id="columnResizeIcon"></div>

    <div id="leftColumn">
        <div class="header">Left Header</div>
        <div class="content"></div>

    </div>
    <div id="rightColumn">
        <div class="header">Right Header</div>
        <div class="content"></div>
    </div>
</div>

我会发布一个小提琴，但代码需要从iOS模拟器或实际的iOS设备运行，并且jsFiddle与Apple不能很好地运行。

Answer 1

我说这个问题在边缘。我会摆脱他们（听我说！）。

#leftColumn, #rightColumn, #columnResize{
    position: absolute;
    top: 0px;
    bottom: 0px;
    etc...
}
#leftColumn{
    left: 0%;
    width: 50%;
}
#rightColumn{
    left: 50%;
    width:50%;
}
#columnResize{
    left: 50%;
    width: 2px;
    z-index:2;
}

这是一个便宜的技巧，但由于你的调整大小只有2px宽，它可能与右列有相同的左侧位置。用户无法确定它应该是左边的1px。例如根据两列的内容，您可能需要在右列内的任何内容的左侧边距。

单像素CSS错误？

1 个答案: