0

jVectorMap http://jvectormap.owl-hollow.net/ にあるマップを使用してモバイル サイトで作業しようとしています。横向きモードの iPhone でページを表示するときに、scale コマンドを に変更する必要があることがわかりました。 4. ただし、ポートレート モードの場合は、.2 のように小さくする必要があります。

このコードを使用して、jVectorMap からダウンロードした js ライブラリにあるスケール値を調整しています。コメント アウトされたコードは、iPhone の画面に合わせて変更した元のコードです。

    applyTransformParams: function(scale, transX, transY) {
        if (this.mode == 'svg') {
            this.rootGroup.setAttribute('transform', 'scale(.4) translate(30, '+transY+')');
//this.rootGroup.setAttribute('transform', 'scale('+scale+') translate('+transX+', '+transY+')');
        } else {
            this.rootGroup.coordorigin = (this.width-transX)+','+(this.height-transY);
            this.rootGroup.coordsize = this.width/scale+','+this.height/scale;
        }
    }

私の質問は、js を介して画面の向きを決定し、スケール番号を更新する方法はありますか? それとも、モバイルに最適なコマンドがあるのでしょうか?

助けてくれてありがとう

4

1 に答える 1

1

次のように、ブラウザがイベントをサポートしているかどうかonorientationchange(またはにフォールバックするかどうかonresize) を確認できます。

var evt;
if ((typeof window.orientation !== 'undefined') && ('onorientationchange' in window)) {
    evt = 'orientationchange';
} else {
    evt = 'resize';
}

次のようにいつでも向きを取得できます。

var getOrientation = function () {
    if (evt === 'orientationchange') {
        return = (window.orientation === 0) ? 'portrait' : 'landscape';
    } else {
        return = (window.innerHeight > window.innerWidth) ? 'portrait' : 'landscape';
    }

};

次に、そのイベントをサブスクライブして、そこでスケーリングを行うことができます。

var originalOrientation = getOrientation;
window.addEventListener(evt, function () {
    var orientation = getOrientation();
    if (orientation !== originalOrientation) {
        originalOrientation = orientation;
        // do your scaling here...
    }
});
于 2011-10-03T16:41:11.187 に答える