0

我正在尝试使用在 jVectorMap http://jvectormap.owl-hollow.net/上找到的地图在移动站点上工作， 我发现在 iphone 上以横向模式查看页面时，我需要将缩放命令更改为 . 4. 但是，在纵向模式下，它需要更小，例如 0.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 回答