Question

我创建了一个JSFiddle来帮助你们了解我的问题：https://jsfiddle.net/7355kq0n/2/（如果你让HTML方面更宽，那就更好了）

<div id="el1" contenteditable="true"></div>
<div id="el2" contenteditable="true"></div>
<div id="el3" contenteditable="true"></div>
<div id="el4" contenteditable="true"></div>


var els, style, text;

style = { "height": 103.23, "width": 90.41, "fontSize": 9.32 };
els = [{
  element: document.querySelector("#el1"),
  scale: 1
}, {
  element: document.querySelector("#el2"),
  scale: 1.732
}, {
  element: document.querySelector("#el3"),
  scale: 2.3
}, {
  element: document.querySelector("#el4"),
  scale: 4.324
}];
text = "Sed commodo neque quis vulputate porttitor. Quisque pulvinar ullamcorper bibendum. Fusce dignissim vestibulum massa, eget blandit nunc tempor at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla accumsan nunc ac enim vehicula, ac tristique augue congue. Integer a dictum libero. Proin semper mattis luctus. In gravida nisi et leo venenatis fringilla. Quisque ut euismod lorem. Mauris vitae vestibulum ligula. Suspendisse tristique augue placerat augue mollis bibendum.";

for (var i=0; i<els.length; i++) {
    var el = els[i];

  el.element.innerHTML = text;

  for (attr in style) {
    el.element.style[attr] = (style[attr] * el.scale) + "px";
  };
}

正如您可以快速看到的那样，为HTML元素保持相同的大小（宽度，高度，fontSize），然后只在它们上应用缩放因子，创建不同的渲染结果...文本将不会在同一位置切割，具体取决于变焦。

我遇到这个问题是因为我们在App中遇到同样的问题，我们想知道是什么导致了这个问题（我们的代码，环境，重置......）但是这个简单的测试让我相信我们刚被浏览器容量阻止......

我错过了什么吗？是浏览器问题还是浏览器限制？这种东西有没有修复或改进？：）

HTML /文本渲染差异相同的大小+因子/缩放

0 个答案: