diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js index 48349ee..0ede92a 100644 --- a/core/modules/responsive_preview/js/responsive-preview.js +++ b/core/modules/responsive_preview/js/responsive-preview.js @@ -427,8 +427,10 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ // Calculate preview width & height. If the preview is rotated, swap width // and height. - var width = dimensions[(isRotated) ? 'height' : 'width'] / dimensions.dppx; - var height = dimensions[(isRotated) ? 'width' : 'height'] / dimensions.dppx; + var displayWidth = dimensions[(isRotated) ? 'height' : 'width']; + var displayHeight = dimensions[(isRotated) ? 'width' : 'height']; + var width = displayWidth / dimensions.dppx; + var height = displayHeight / dimensions.dppx; // Get the container padding and border width for the left and right. var bleed = this.bleed; @@ -462,8 +464,8 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ // Update the device label. $container.find('.device-label').text(Drupal.t('@label (@widthpx by @heightpx, @dpidppx, @orientation)', { '@label': $deviceLink.text(), - '@width': Math.ceil(width), - '@height': Math.ceil(height), + '@width': Math.ceil(displayWidth), + '@height': Math.ceil(displayHeight), '@dpi': dimensions.dppx, '@orientation': (isRotated) ? this.strings.landscape : this.strings.portrait })); @@ -526,6 +528,7 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ * - http://tripleodeon.com/wp-content/uploads/2011/12/table.html?r=android40window.innerw&c=980 */ _calculateScalingCSS: function () { + var isRotated = this.model.get('isRotated'); var settings = this._parseViewportMetaTag(); var defaultLayoutWidth = 980, initialScale = 1; var layoutViewportWidth, layoutViewportHeight; @@ -555,11 +558,12 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ } } - // Calculate the scale, prevent excesses (ensure the (0.25, 2) range). + // Calculate the scale, prevent excesses (ensure the (0.25, 1) range). var dimensions = this.tabModel.get('dimensions'); - visualViewPortWidth = dimensions.width / dimensions.dppx; + // If the preview is rotated, width and height are swapped. + visualViewPortWidth = dimensions[(isRotated) ? 'height' : 'width'] / dimensions.dppx; var scale = initialScale * (100 / layoutViewportWidth) * (visualViewPortWidth / 100); - scale = Math.min(scale, 2); + scale = Math.min(scale, 1); scale = Math.max(scale, 0.25); var transform = "scale(" + scale + ")";