以mm为单位计算内部divs宽度/高度（相对于具有已知宽度/高度的外部div，以mm为单位）。

Question

1. 我有一个外部div，其指定的宽度/高度（mm）。 （mm只是赋值，不用于渲染）。
2. 在里面我有另一个div，在px中有一个真正的宽度/高度。
3. 两个div可以有不同的比率。

我想要做的是以mm为单位计算内部divs宽度/高度。使用JavaScript并考虑规模。

示例1：指定宽度/高度的外部div为30x30mm，比例为0.8，px内部divs宽度/高度为600x600px，结果应为24x24mm。

示例2：指定宽度/高度的外部div为60x30mm，比例为1.0，px中的内部divs宽度/高度为300x600px，结果应为15x30mm。

以mm为单位的外部div宽度/高度被视为最大尺寸。

猜猜它很简单，但div /表面可能有不同的比例这一事实让我觉得很复杂。

var calcDimensions = function(scale) {

   var surfaceWidth, surfaceHeight, contentWidth, contentHeight, contentRatio, surfaceRatio;

   // Output variable holding the result
   var dimensions = { width: 0, height: 0 };


   surfaceWidth = 30; // outer divs assigned width in mm
   surfaceHeight = 14; // outer divs assigned height in mm
   contentWidth = 600; // inner divs real width in px
   contentHeight = 196; // inner divs real height in px

   scale = 0.8; // Can have a value between 0.1 - 1.0

   contentRatio = contentWidth > contentHeight ? contentHeight / contentWidth : contentWidth / contentHeight; // Assuming this is needed in the calculation.
   surfaceRatio = surfaceWidth > surfaceHeight ? surfaceHeight / surfaceWidth : surfaceWidth / surfaceHeight; // Assuming this is needed in the calculation.

  // Calculate stuff here and return calculated dimensions

  return dimensions;

}

Answer 1

您可以尝试执行以下操作：

在视图中添加宽度= 100mm的div

<div style="width:100mm;height:0" id="measure">

也许您必须设置z-index或bg-color才能使div不可见。 现在，您可以计算设备上每毫米像素数，如下所示：

let pxPerMm = document.getElementById('measure').offsetWidth / 100;