不可缩放元素

Question

我想 div 大小等于 1 个屏幕像素，无论当前浏览器缩放。

这个元素尽可能小对我来说很重要，但如果下一个元素试图获得与容器相同或更大的大小，则会导致换行。

我使用了 1px 但是当页面缩放小于 100% 时它变得不稳定 - 有时它有效，但有时 Chrome 将元素缩小到 0 并且不换行下一个元素。所以我希望在其他zooms上放大element，但是不知道怎么检测。

似乎在我的电脑上，下一个片段工作正常，但在实际代码中，如果浏览器缩放小于 100%，类似的事情就会不稳定。 在此示例中，我希望红色 div 占据屏幕宽度的 1px，而不管当前缩放比例如何。 这可能吗？

~function () {
  var s = "When silver div gets too wide it should jump down..."
  var i = s.length
  var div = document.querySelector(".content");

  setInterval(function () {
    div.textContent = s.slice(0, i = ++i % (s.length + 1))
  }, 100)
}()

section {
  width: 15em;
  height: 2em;
  line-height: 2em;
  border: 1px solid;
}

div {
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.narrow {
  width: 1px;
  background: red;
  margin-bottom: 1px;
}

.content {
  background: silver;
  white-space: nowrap;
}

<section><div class=narrow></div><div class=content></div></section>

Answer 1

对于webkit，媒体查询是可能的：

~function () {
  var s = "When silver div gets too wide it should jump down..."
  var i = s.length
  var div = document.querySelector(".content");

  setInterval(function () {
    div.textContent = s.slice(0, i = ++i % (s.length + 1))
  }, 100)
}()

section {
  width: 15em;
  height: 2em;
  line-height: 2em;
  border: 1px solid;
}

div {
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.narrow {
  width: 1px;
  background: red;
  margin-bottom: 1px;
}

@media (-webkit-min-device-pixel-ratio: .1 )   { .narrow { width: 10px; } }
@media (-webkit-min-device-pixel-ratio: .25)   { .narrow { width:  4px; } }
@media (-webkit-min-device-pixel-ratio: .3 )   { .narrow { width:  3px; } }
@media (-webkit-min-device-pixel-ratio: .5 )   { .narrow { width:  2px; } }
@media (-webkit-min-device-pixel-ratio: 1  )   { .narrow { width:  1px; } }

.content {
  background: silver;
  white-space: nowrap;
}

<section><div class=narrow></div><div class=content></div></section>

不可缩放元素

Unzoomable element

javascript

css

google-chrome

scale