縮放瀏覽器上的CSS問題-縮放視圖中的元素消失了

Question

我有div用1px的高度和寬度100像素 。 現在，我將網頁從100％縮放到80％或以下（67％或50％或33％）。 現在，該元素在特定縮放級別下不可見。 但是它在DOM結構中可用。

然后，當我去開發菜單並將height的值從“ 1px”更改為“ 2px”或“ 3px”時，該元素就會出現在視圖中。

請檢查以下代碼段：

 #test1{ width: 100px; height: 1px; background-color:blue; } 

 <div id="test1"></div> 

有人對此有想法嗎？ 我可以使用CSS修復此問題嗎？ 這是在所有縮放級別中可見的元素。

注意：我正在使用ctrl和+或ctrl和鼠標滾輪來縮放網頁。

Answer 1

您可以更改任何縮放級別的高度值

  $(window).resize(function() {
    var zoomLevel = window.devicePixelRatio;
    if(zoomLevel < 0.67 && zoomLevel > 0.3){
     $("#test1").css({ 'height': '3px' });
    }else{
      $("#test1").css({ 'height': '1px' });
    }
  });

https://codepen.io/piscu/pen/EboKLX