Hướng dẫn how to handle browser zoom in css - cách xử lý trình duyệt phóng to css

Không chuẩn: Tính năng này là không chuẩn và không nằm trên đường tiêu chuẩn. Không sử dụng nó trên các trang web sản xuất đối mặt với web: nó sẽ không hoạt động cho mọi người dùng. Cũng có thể có sự không tương thích lớn giữa việc triển khai và hành vi có thể thay đổi trong tương lai. This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Thuộc tính CSS không chuẩn có thể được sử dụng để kiểm soát mức độ phóng đại của một phần tử. transform: scale() nên được sử dụng thay vì thuộc tính này, nếu có thể. Tuy nhiên, không giống như các biến đổi CSS, zoom ảnh hưởng đến kích thước bố cục của phần tử.zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

Cú pháp

/* Keyword values */
zoom: normal;
zoom: reset;

/*  values */
zoom: 50%;
zoom: 200%;

/*  values */
zoom: 1.1;
zoom: 0.7;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

Giá trị

zoom =
  normal | reset |  | 
0

Kết xuất yếu tố này ở kích thước bình thường của nó.

zoom =
  normal | reset |  | 
1 không chuẩnNon-standard

Không (DE) phóng đại phần tử này nếu người dùng áp dụng phóng to không dựa trên pinch (ví dụ: bằng cách nhấn Ctrl - - hoặc Ctrl + + phím phím bàn phím) vào tài liệu. Không sử dụng giá trị này, thay vào đó, hãy sử dụng giá trị

zoom =
  normal | reset |  | 
2 tiêu chuẩn.Do not use this value, use the standard
zoom =
  normal | reset |  | 
2 value instead.

zoom =
  normal | reset |  | 
3

Yếu tố thu phóng.

zoom =
  normal | reset |  | 
4 tương đương với
zoom =
  normal | reset |  | 
0. Các giá trị lớn hơn
zoom =
  normal | reset |  | 
4 Thu phóng. Giá trị nhỏ hơn
zoom =
  normal | reset |  | 
4 zoom ra.

zoom =
  normal | reset |  | 
8

Yếu tố thu phóng. Tương đương với tỷ lệ phần trăm tương ứng (

zoom =
  normal | reset |  | 
9 =
zoom =
  normal | reset |  | 
4 =
zoom =
  normal | reset |  | 
0). Các giá trị lớn hơn
zoom =
  normal | reset |  | 
9 Thu phóng. Giá trị nhỏ hơn
zoom =
  normal | reset |  | 
9 Thu phóng.

Định nghĩa chính thức

Cú pháp chính thức

zoom =
  normal | reset |  | 

Ví dụ

Ví dụ đầu tiên

HTML

<p class="small">Smallp>
<p class="normal">Normalp>
<p class="big">Bigp>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}

.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

Kết quả

Ví dụ thứ hai

HTML

<div id="a" class="circle">div>
<div id="b" class="circle">div>
<div id="c" class="circle">div>

CSS

div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  zoom: 1.5;
}
div#a {
  background-color: gold;
  zoom: normal;
}
div#b {
  background-color: green;
  zoom: 200%;
}
div#c {
  background-color: blue;
  zoom: 2.9;
}

Kết quả

Ví dụ thứ hai

Thông số kỹ thuật

Không phải là một phần của bất kỳ tiêu chuẩn. Khách sạn này có nguồn gốc trong Internet Explorer. Apple có một mô tả trong tài liệu tham khảo Safari CSS. Rossen Atanassov của Microsoft có một đề xuất đặc điểm kỹ thuật không chính thức trên GitHub.

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Làm thế nào để bạn đối phó với Zoom trong CSS?

Để khắc phục sự cố khi phóng to, hãy thử thêm thuộc tính Min-Width vào Countainer bên ngoài của bạn (#Container hoặc #Navbar?). Đặt chiều rộng tối thiểu ngăn trang web cố gắng giảm xuống ngoài chiều rộng được chỉ định (nghĩa là 300px).adding the min-width attribute to your outer countainer ( #container or #navbar ?). Setting min-width prevents the webpage from trying to shrink down beyond the specified width (i.e. 300px).

Trình duyệt Zoom ảnh hưởng đến CSS như thế nào?

Chính thức, phần tử vẫn có chiều rộng 128 pixel CSS, mặc dù nó xảy ra không gian của 256 pixel thiết bị. Nói cách khác, phóng to đến 200% làm cho một pixel CSS tăng lên gấp bốn lần kích thước của một pixel thiết bị. (Hai lần chiều rộng, hai lần chiều cao, mang lại tổng cộng bốn lần).zooming to 200% makes one CSS pixel grow to four times the size of one device pixels. (Two times the width, two times the height, yields four times in total).

Làm thế nào để bạn phóng to trên một trang web bằng CSS?

Thuộc tính Zoom CSS không chuẩn có thể được sử dụng để kiểm soát mức độ phóng đại của một phần tử.Biến đổi: Scale () nên được sử dụng thay vì thuộc tính này, nếu có thể.Tuy nhiên, không giống như các biến đổi CSS, Zoom ảnh hưởng đến kích thước bố cục của phần tử.transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

Làm cách nào để thu nhỏ màn hình của tôi trong CSS?

Thuộc tính Zoom trong CSS cho phép bạn mở rộng quy mô nội dung của mình.Nó không chuẩn và ban đầu chỉ được triển khai trong Internet Explorer ...
Tỷ lệ phần trăm - tỷ lệ theo tỷ lệ phần trăm này ..
số - chuyển đổi thành tỷ lệ phần trăm và tỷ lệ - 1 == 100%;1.5 == 150%;.
Bình thường - Zoom: 1 ;.