时间戳

首页 > 解决方案 > 防止用户缩放浏览器时网格区域大小增加/减少

css - 防止用户缩放浏览器时网格区域大小增加/减少

问题描述

我有一个具有装饰性边框（顶部、右侧、底部、左侧）的布局，这些边框不包含内容，但包含华丽的 SVG 图案。

这些边框是使用grid-template-columns和grid-template-rows grid属性定义的，高度或宽度为 70 像素。

当用户将浏览器缩放级别设置为 125%、150%、200% 时，元素的大小会按比例缩放（87px、105px、140px）

如何根据用户的浏览器缩放输入防止某些网格区域（顶部、右侧、底部、左侧）增长/缩小。

.stage-inner {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 70px 1fr 1fr 1fr 70px;
  grid-template-rows: 70px 1fr 1fr 1fr 70px;
  grid-template-areas:
    "top top top top top"
    "left content content content right"
    "left content content content right"
    "left content content content right"
    "bottom bottom bottom bottom bottom";
}

https://codepen.io/MathiasaurusRex/pen/bzBdmX

标签： csscss-grid

解决方案

您可以尝试访问设备像素比率并将您的尺寸除以该百分比以重新计算将以 70 像素呈现的尺寸。

browserZoomLevel = Math.round(window.devicePixelRatio * 100);

https://codepen.io/Jason_B/pen/GzNZZd

我分叉了你的 codepen 并添加了这个 jQuery 代码：

$( window ).on( 'load resize', function() {
    const browserZoomLevel = Math.round(window.devicePixelRatio * 100);
    const normalizedDimension = 70 * 100 / browserZoomLevel + 'px';

    $( '.stage-inner' )
        .css( 
            'gridTemplateColumns', 
            normalizedDimension + ' 1fr 1fr 1fr ' + normalizedDimension 
        ).css(
           'gridTemplateRows', 
            normalizedDimension + ' 1fr 1fr 1fr ' + normalizedDimension 
    );
});

推荐阅读