Làm cách nào để phóng to phần tử HTML trong Firefox và Opera?Làm cách nào để phóng to phần tử HTML trong Firefox và Opera?
Thuộc tính zoom đang hoạt động trong IE, Google Chrome và Safari nhưng không hoạt động trong Firefox và Opera.
Có phương pháp nào để thêm thuộc tính này vào Firefox và Opera không?
Điều này hoạt động hoàn hảo. Có phương pháp nào để thay đổi hệ số tỷ lệ biến đổi -moz-tỷ lệ thành phần trăm – shahul
Đó là phần trăm theo dạng thập phân. (1 = 100% 2 = 200% 0,2 = 20%) Nhưng tôi tin rằng bạn cũng có thể sử dụng ký hiệu phần trăm. http://www.w3.org/TR/css3-values/#percentages – sholsinger
Vấn đề với điều này, là khi bạn đã cố định các phần tử vị trí. Thu phóng hoạt động theo cách khác so với quy mô chuyển đổi. –
Nó không hoạt động theo cách thống nhất trong tất cả các trình duyệt. Tôi đã đi đến: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage và thêm phong cách để phóng to và chuyển đổi -moz. Tôi chạy cùng một mã trên firefox, IE và chrome và có 3 kết quả khác nhau.
<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" />
</body>
</html>
zoom: 145%;
-moz-transform: scale(1.45);
sử dụng này để được ở bên an toàn hơn
Điều này phóng to 2x trong webkit. Nắm tay bằng zoom, thứ hai theo tỷ lệ –
Zoom và chuyển đổi quy mô không phải là những điều tương tự. Chúng được áp dụng vào các thời điểm khác nhau. Thu phóng được áp dụng trước khi kết xuất diễn ra, chuyển đổi - sau. Kết quả của việc này là nếu bạn lấy div có chiều rộng/chiều cao = 100% lồng vào bên trong div khác, với kích thước cố định, nếu bạn áp dụng thu phóng, mọi thứ bên trong thu phóng bên trong sẽ thu nhỏ hoặc tăng, nhưng nếu bạn áp dụng chuyển đổi toàn bộ div bên trong sẽ co lại (mặc dù chiều rộng/chiều cao được đặt thành 100%, chúng sẽ không được 100% sau khi chuyển đổi).
hoạt động này có phù hợp với bạn không? :
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
Đối với tôi này hoạt động tốt với IE10, Chrome, Firefox và Safari:
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
này phóng tất cả các nội dung trong đến 50%.
Đối với tôi làm việc này để đối phó với sự khác biệt giữa zoom và quy mô biến đổi, điều chỉnh cho nguồn gốc dành mong muốn:
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Sử dụng scale thay! Sau nhiều nghiên cứu và thử nghiệm tôi đã thực hiện plugin này để đạt được nó trình duyệt chéo:
$.fn.scale = function(x) {
if(!$(this).filter(':visible').length && x!=1)return $(this);
if(!$(this).parent().hasClass('scaleContainer')){
$(this).wrap($('<div class="scaleContainer">').css('position','relative'));
$(this).data({
'originalWidth':$(this).width(),
'originalHeight':$(this).height()});
}
$(this).css({
'transform': 'scale('+x+')',
'-ms-transform': 'scale('+x+')',
'-moz-transform': 'scale('+x+')',
'-webkit-transform': 'scale('+x+')',
'transform-origin': 'right bottom',
'-ms-transform-origin': 'right bottom',
'-moz-transform-origin': 'right bottom',
'-webkit-transform-origin': 'right bottom',
'position': 'absolute',
'bottom': '0',
'right': '0',
});
if(x==1)
$(this).unwrap().css('position','static');else
$(this).parent()
.width($(this).data('originalWidth')*x)
.height($(this).data('originalHeight')*x);
return $(this);
};
usege:
$(selector).scale(0.5);
lưu ý:
Nó sẽ tạo ra một wrapper với một lớp scaleContainer. Hãy quan tâm đến điều đó trong khi nội dung tạo kiểu.
Tôi đã thề tại thời điểm này. Zoom chắc chắn không phải là giải pháp, nó hoạt động trong chrome, nó hoạt động một phần trong IE nhưng di chuyển toàn bộ div html, firefox doesnt làm một điều.
Giải pháp của tôi mà làm việc đối với tôi là sử dụng cả một mở rộng quy mô và bản dịch, và cũng có thêm chiều cao ban đầu và trọng lượng và sau đó thiết lập chiều cao và cân nặng của div bản thân:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Rõ ràng thay đổi này để nhu cầu của riêng bạn. Nó đã cho tôi kết quả tương tự trong tất cả các trình duyệt.
Tôi sẽ thay đổi zoom cho transform trong mọi trường hợp vì, như được giải thích bởi các câu trả lời khác, chúng không tương đương. Trong trường hợp của tôi, nó cũng cần thiết để áp dụng transform-origin tài sản để đặt các mục mà tôi muốn.
này đã làm việc cho tôi trong Chome, Safari và Firefox:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
Chỉ đúng và W3C tương thích câu trả lời là: <html> đối tượng và rem. chuyển đổi không làm việc một cách chính xác nếu bạn mở rộng xuống (ví dụ quy mô (0,5)
Sử dụng:.
html
{
font-size: 1mm; /* or your favorite unit */
}
và sử dụng trong mã đơn vị của bạn "rem" (bao gồm cả phong cách cho <body>) đơn vị thay vì số liệu. "%" s không có thay đổi Đối với tất cả các hình nền có kích thước nền. Xác định cỡ chữ cho phần thân, được thừa hưởng bởi các phần tử khác.
nếu xảy ra bất kỳ điều kiện nào kích hoạt zoom khác (thông qua CSS hoặc JS).
ví dụ:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
Điều này làm cho tương đương với zoom: 0.5 không có vấn đề trong JS với clientX và định vị trong các sự kiện kéo thả.
Không sử dụng "rem" trong truy vấn phương tiện.
Bạn thực sự không cần thu phóng, nhưng trong một số trường hợp, phương pháp này có thể nhanh hơn cho các trang web hiện có.
Tôi muốn giới thiệu cho bạn [câu hỏi này] (http://stackoverflow.com/questions/1156278/css-how-to-scale-entire-web-page-with-css) câu trả lời của bạn khá kỹ lưỡng. – Ben