0

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

我正在让它工作，但我遇到了一些 CSS 定位问题。这些问题通常会偏离一个像素，但我确信这只是我的数学结果。基本上，两列布局通常设置为使每一边都是均匀的。然后，如果您移动滑块，它将更改列的left和right值以增加或减少它们的宽度。调整大小图标位于这两列之间，并随着它们的宽度变化而移动。

然而，问题在于，当您旋转设备时，中间分隔线会改变几个像素的位置。要复制问题，您可以：

  1. 打开页面
  2. 旋转应用
  3. 将应用旋转回原始位置

或者：

  1. 打开应用
  2. 移动滑块
  3. 旋转应用
  4. 将应用旋转回原始位置
  5. 旋转应用

在每种情况下，中间分隔线都会偏离几个像素，导致它无法与分隔线正确对齐。

运行其中大部分的 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 配合使用。

4

1 回答 1

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 宽，它可能与右列具有相同的左 pos。用户将无法判断它实际上应该在左侧 1px 处。例如，根据两列的内容，您可能希望在右列内的任何内容的左侧留出一个边距。

于 2013-03-28T05:10:51.130 回答