简体   繁体   English

缩放浏览器上的CSS问题-缩放视图中的元素消失了

[英]CSS issue on zooming browser - Element is disappearing from view on zooming

I have div with height 1px and width 100px . 我有div1px的高度和宽度100像素 Now I am zooming my web page from 100% to 80% or less (67% or 50% or 33%). 现在,我将网页从100%缩放到80%或以下(67%或50%或33%)。 The element is hidden from visible now at certain zoom level. 现在,该元素在特定缩放级别下不可见。 But it is available in DOM structure. 但是它在DOM结构中可用。

Then when I go to develop menu and change the value of height from "1px" to "2px" or "3px", the element gets appeared in the view. 然后,当我去开发菜单并将height的值从“ 1px”更改为“ 2px”或“ 3px”时,该元素就会出现在视图中。

Please check the following code snippets: 请检查以下代码段:

 #test1{ width: 100px; height: 1px; background-color:blue; } 
 <div id="test1"></div> 

Do anyone have idea about this? 有人对此有想法吗? And can I get fix for this with CSS? 我可以使用CSS修复此问题吗? That is element to be visible in all the zoom levels. 这是在所有缩放级别中可见的元素。

Note: I am zooming the web page using ctrl and + or ctrl and mouse wheel. 注意:我正在使用ctrl+ctrl和鼠标滚轮来缩放网页。

you can change height value for any zoom level 您可以更改任何缩放级别的高度值

  $(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 https://codepen.io/piscu/pen/EboKLX

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM