Làm cách nào để thu phóng một phần tử HTML trong Firefox và Opera?
Các zoomtài sản đang làm việc trong IE, Google Chrome và Safari, nhưng nó không làm việc 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?
Câu trả lời:
Tỷ lệ thu phóng và chuyển đổi không giống nhau. Chúng được áp dụng vào những 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 một div có chiều rộng / chiều cao = 100% được lồng vào bên trong của một 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 của bạn sẽ thu nhỏ hoặc tăng lên, nhưng nếu bạn áp dụng thì 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 bằng 100% sau khi chuyển đổi).
Sử dụng scalethay thế! Sau nhiều nghiên cứu và thử nghiệm, tôi đã thực hiện plugin này để đạt được nó trên nhiều trình duyệt:
$.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);
};
sử dụng:
$(selector).scale(0.5);
Ghi chú:
Nó sẽ tạo một trình bao bọc với một lớp scaleContainer. Hãy quan tâm đến điều đó trong khi tạo nội dung.
.width($(this).data('originalWidth') * x + borderWidth)
zoom: 145%;
-moz-transform: scale(1.45);
sử dụng điều này để an toàn hơn
Tôi sẽ thay đổi zoomcho transformtrong mọi trường hợp bởi vì, như được giải thích bởi câu trả lời khác, họ không phải là tương đương. Trong trường hợp của tôi, nó cũng cần thiết để áp dụng transform-origintài sản để đặt các vật phẩm ở nơi tôi muốn.
Điều 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;
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 đã truy cập: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage và thêm kiểu cho thu phóng và -moz-biến đổi. Tôi đã chạy cùng một đoạn mã trên firefox, IE và chrome và nhận đượ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>
Tôi đã thề với điều này trong một thời gian. 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 không làm được gì.
Giải pháp của tôi phù hợp với tôi là sử dụng cả tỷ lệ và bản dịch, đồng thời thêm chiều cao và cân nặng ban đầu, sau đó đặt chiều cao và cân nặng của chính div:
#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 là thay đổi những điều này theo nhu cầu của riêng bạn. Nó cho tôi cùng một kết quả trên tất cả các trình duyệt.
thử mã này để phóng to toàn bộ trang trong fireFox
-moz-transform: scale(2);
nếu tôi đang sử dụng mã này, toàn bộ trang được chia tỷ lệ với cuộn y và x không thu phóng đúng cách
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
Đơn giản là bạn không thể thu phóng trang của mình bằng css trong fireFox
**
Chỉ câu trả lời đúng và tương thích với W3C là: <html> object và rem. chuyển đổi không hoạt động chính xác nếu bạn giảm tỷ lệ (ví dụ: tỷ lệ (0,5).
Sử dụng:
html
{
font-size: 1mm; /* or your favorite unit */
}
và sử dụng đơn vị "rem" trong mã của bạn (bao gồm cả kiểu cho <body>) thay vì đơn vị chỉ số. "%" s không có thay đổi. Đối với tất cả các hình nền, hãy đặt kích thước nền. Xác định kích thước phông chữ cho nội dung, kích thước này được kế thừa bởi các phần tử khác.
nếu bất kỳ điều kiện nào xảy ra sẽ kích hoạt thu phóng khác với 1.0, hãy thay đổi kích thước phông chữ cho thẻ (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 thu phóng: 0,5 mà 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 các 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, nó có thể nhanh hơn đối với các trang hiện có.