0

css式でcssからタブレットの幅を見つけて適用する必要があります。私はdivコンテンツを持っています。縦向きモードでは幅 100% を適用し、横向きにすると、div の幅がタブレット デバイスの幅の半分 (タブレット幅/2) に変更されます。cssでこの表現方法を適用するには?

4

1 に答える 1

2

Internet Explorer 5、6、および 7 (これを実行するタブレットは??) に限定されており、(パフォーマンスに関して) 処理がかなり遅くなるため、式を避けようとします。とにかく、これを試してください：

@media screen and (orientation:portrait) {
    /* Portrait styles */
}

@media screen and (orientation:landscape) {
    .element {
        width:expression(document.body.clientWidth / 2);
    }
}

より具体的な方法を試すこともできます - これらはハックと見なされます (提案してくれた TheBlackBenzKid に感謝します)。

/* Windows 7 Phone - WP7 */
@media only screen and (max-device-width: 480px) and (orientation:portrait) {
}
@media only screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* Apple iPhone */
@media only screen and (max-device-width: 320px) and (orientation:portrait) {
}
@media only screen and (max-device-width: 320px) and (orientation:landscape) {

}

式を使用しない場合 (たとえば、他のブラウザやタブレットをターゲットにする場合)、小さな JavaScript を使用して方向を検出し、要素にクラスを追加できます。

html:

<body onorientationchange="updateOrientation();">

Javascript:

function updateOrientation() {
    if(window.innerWidth> window.innerHeight){
        //we are in landscape mode, add the 'LandscapeClass' class to the element
        document.getElementById("element").className += " LandscapeClass";
    } else {
        //we are in portrait mode, remove the class
        document.getElementById("element").className = 
           document.getElementById("element").className.replace
              ( /(?:^|\s)LandscapeClass(?!\S)/ , '' );
}

jQuery を使用している場合は、要素の (インライン) CSS を直接変更するために、これを試すことができます。

function updateOrientation() {
    var $width;
    if(window.innerWidth> window.innerHeight){
        $width = window.innerWidth/2;
    } else {
        $width = '100%';
    }
    $(".element").css({width:$width});
}

私はこれをテストしていませんが、うまくいくと思います

于 2012-07-20T07:44:44.673 に答える