JQM Orientation SVG Scale

Question

我正在尝试使用jVectorMap中的地图在移动网站上工作我发现在横向模式下在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屏幕方向，并将它更新比例的数字？或者也许有一个最适合移动的命令？

感谢所有帮助

Answer 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... 
    } 
});