How to solve the screen scaling #zoom# problem?

Screen scaling affects the size and position of page elements, so you need to handle scaling with consideration of all elements that may be affected.
1. For element tooltip, use the CSS transform property instead of the zoom property to scale. The transform keeps the element's size and position the same, but simply scales the content. For example, you could change the style of tooltip to:

.tooltip {
  transform: scale(0.8);
}

Where, scale(0.8) represents 80% reduction.

2. For the dislocation of the scroll bar, JavaScript can be used to adjust the position of the scroll bar. For example, you can calculate the position ratio of the scrollbar while scaling, and then set the scrollTop property of the scrollbar. For example:

var scrollTopRatio = oldScrollTop / oldContentHeight;
var newScrollTop = newContentHeight * scrollTopRatio;
window.scrollTo(0, newScrollTop);

Where oldScrollTop and oldContentHeight are the scrollbar position and content height before scaling, while newContentHeight is the content height after scaling. By calculating the proportional relationship, you can set the new scrollbar position.

To sum up, the misalignment caused by scaling can be solved by using the transform property and JavaScript to adjust the scrollbar position. At the same time, it is recommended to write pages in relative units such as percentages or rem units rather than fixed pixel values to better accommodate different screen sizes and zoom ratios.
If the answer is helpful to you, please accept it.

Based on Monster group and GPT:
Your zoom function is implemented by setting the Zoom property of the body tag. However, this approach can affect the layout and style of the entire page, including the placement of scrollbars and other elements.

Therefore, it is recommended to use the CSS transform property instead of the zoom property. The transform property can scale elements without affecting the layout, thus avoiding the problems you run into. You can set the scale value of the transform to scale as follows:

body {
  transform: scale(0.8);
  transform-origin: top left;
}

Where, the value of scale is scale, and the transform-origin property sets the start position of scaling.

This approach may require fine-tuning of some elements to make them appear correctly on the scaled page. You can use CSS media query to set different styles for different zoom levels to ensure that the page will display correctly at all zoom levels.

The following answers are quoted from GPT-3 model, please use them wisely:

示例。

关于屏幕缩放，我们可以通过CSS3的transform来解决这个问题，即使你的系统默认缩放也可以正常显示。代码示例如下：

// Calculate the zoom ratio
let ZoomRatio = window.innerWidth / 1920;

/ / for the body element to add the transform attribute < br / > the document. The body. The style.css. Transform = scale(${ZoomRatio}) ;

// Add a transform property to tooltip
let tooltipElement = document.getElementById("tooltip");
tooltipElement.style.transform = scale(${ZoomRatio}) ;

// Add a transform attribute to the scroll bar
let scrollElement = document.getElementById("scroll");
scrollElement.style.transform = scale(${ZoomRatio}) ;

Please accept my answer if it answers your question

The answer part references GPT, GPT_Pro better solve the problem
solve the system screen default zoom 150%, causing the element component tooltip dislocation, First of all, it should be clear that due to the diversity of browsers, compatibility must be taken into account in order to achieve consistent results in multiple browsers. There are two specific solutions. One is to use the transform attribute in CSS3 to scale. The other is to use the flexiblebox layout in CSS3.

body {
  transform: scale(1.5); // body标签进行缩放，scale的参数为1.5表示1.5倍的缩放
}

2, use flexiblebox layout in CSS3
Flexbox(flexible layout) is a new layout of CSS3, can achieve multi-column layout, at the same time can be well adapted to different screen sizes, such as in the browser page size to the minimum, the layout will not be a problem. The code is as follows:

body {
  display: flex; // 设置body标签使用flexbox布局
  width: 100%; // 设置宽度为100%
  flex-direction: row; // 设置子元素水平排列
  flex-wrap: wrap; // 设置子元素可以换行显示
}

If the answer is helpful, please accept it.