不可缩放元素

Question

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

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

我使用了1px，但是当页面缩放小于 100% 时，它变得不稳定 - 有时它可以工作，但有时 Chrome 会将元素缩小到 0 并且不包裹下一个元素。所以我希望在其他缩放上放大元素，但我不知道如何检测它。

似乎在我的计算机上下一个 sn-p 工作正常，但在实际代码中，如果浏览器缩放小于 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>