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