0

以前の質問であるCSS Hardware Accelerated Widthで、中央の仕切りを移動することで 2 列のレイアウトのサイズを変更できる機能を含む Phonegap アプリを作成していると述べました。

私はこれを機能させていますが、CSS の配置に問題があります。これらの問題は通常 1 ピクセルずれていますが、私の計算結果に過ぎないことは確かです。基本的に、2 列のレイアウトは通常、各辺が均等になるように設定されます。次に、スライダーを動かすと、列のleftとrightの値が変更され、幅が増減します。サイズ変更アイコンは、これら 2 つの列の間に配置され、幅の変更に合わせて移動します。

ただし、問題は、デバイスを回転させると、中央の仕切りの位置が数ピクセル変わることです。問題を再現するには、次のいずれかを実行できます。

  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;
}

これは安価なトリックですが、サイズ変更バーの幅が 2 ピクセルしかないため、左の位置を右の列と同じにすることもできます。ユーザーは、実際には左に 1 ピクセルあるべきだと判断できません。例: 2 つの列の内容によっては、右の列の内側にあるものの左に余白が必要になる場合があります。

于 2013-03-28T05:10:51.130 に答える