Tôi cần phải tạo 2 nút trên trang web của mình sẽ thay đổi mức thu phóng của trình duyệt (+) (-). Tôi đang yêu cầu thu phóng trình duyệt và không zoom css vì kích thước hình ảnh và vấn đề bố cục.Thay đổi mức thu phóng của trình duyệt
Vâng, điều này thậm chí có thể? Tôi đã nghe báo cáo xung đột.
Tôi sẽ không thể nói trong hầu hết các trình duyệt, ít nhất là không có một số plugin bổ sung. Và trong mọi trường hợp, tôi sẽ cố gắng tránh dựa vào mức thu phóng của trình duyệt khi các triển khai thay đổi (một số trình duyệt chỉ thu phóng phông chữ, các trình duyệt khác cũng phóng to hình ảnh, v.v.). Trừ khi bạn không quan tâm nhiều đến trải nghiệm người dùng.
Nếu bạn cần thu phóng đáng tin cậy hơn, hãy xem xét thu phóng phông chữ và hình ảnh của trang bằng JavaScript và CSS hoặc có thể ở phía máy chủ. Các vấn đề về tỷ lệ hình ảnh và bố trí có thể được giải quyết theo cách này. Tất nhiên, điều này đòi hỏi nhiều công việc hơn một chút.
Không thể trong IE, vì nút Thu phóng giao diện người dùng trên thanh trạng thái không thể viết được. YMMV cho các trình duyệt khác.
có thể trong IE window.parent.document.body.style.zoom = 1.5; –
Áp phích gốc đặc biệt yêu cầu "không phải CSS zoom". –
Bạn có thể sử dụng CSS3 zoom function, nhưng tôi chưa thử nghiệm với jQuery. Sẽ thử ngay bây giờ và cho bạn biết. CẬP NHẬT: đã kiểm tra, hoạt động nhưng vui vẻ
thật đáng buồn, thuộc tính thu phóng không phải là giải pháp crossbrowser ... –
vâng, hoàn toàn không. Bất kỳ ý tưởng cho trình duyệt chéo? CẬP NHẬT: không cần, chỉ cần kiểm tra các bài viết ở trên! chúc mừng –
Dường như hoạt động trong Chrome và Safari, nhưng không hoạt động trên Firefox. – Ansjovis86
Hãy thử xem điều này có phù hợp với bạn hay không. Điều này hoạt động trên FF, IE8 + và chrome. Phần khác áp dụng cho các trình duyệt không phải firefox. Mặc dù điều này mang lại cho bạn hiệu ứng thu phóng nhưng nó không thực sự sửa đổi giá trị thu phóng ở cấp trình duyệt.
var currFFZoom = 1;
var currIEZoom = 100;
$('#plusBtn').on('click',function(){
if ($.browser.mozilla){
var step = 0.02;
currFFZoom += step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
} else {
var step = 2;
currIEZoom += step;
$('body').css('zoom', ' ' + currIEZoom + '%');
}
});
$('#minusBtn').on('click',function(){
if ($.browser.mozilla){
var step = 0.02;
currFFZoom -= step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
} else {
var step = 2;
currIEZoom -= step;
$('body').css('zoom', ' ' + currIEZoom + '%');
}
});
bạn phải có plugin di chuyển jquery 1.8.3 hoặc jquery (để sử dụng $ .browser) –
+ không hoạt động trong opera –
Đây là CSS zoom – SmallChess
tốt trong IE và chrome mặc dù nó không hoạt động trong firefox:
<script type="text/javascript">
function toggleZoomScreen() {
document.body.style.zoom="80%"
}
</script>
<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">
Jourkey yêu cầu rõ ràng * non * Thu phóng CSS. – kmkaplan
Đây chỉ là thay đổi giá trị thu phóng CSS nội tuyến trên cơ thể, điều này hoàn toàn ngược lại với câu hỏi được hỏi. – mystrdat
Đừng quên rằng trạng thái thu phóng này có thể cần được lưu và quản lý liên tục trong biến phiên và phát lại mỗi lần tải trang. –
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var currFFZoom = 1;
var currIEZoom = 100;
function plus(){
//alert('sad');
var step = 0.02;
currFFZoom += step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
var stepie = 2;
currIEZoom += stepie;
$('body').css('zoom', ' ' + currIEZoom + '%');
};
function minus(){
//alert('sad');
var step = 0.02;
currFFZoom -= step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
var stepie = 2;
currIEZoom -= stepie;
$('body').css('zoom', ' ' + currIEZoom + '%');
};
</script>
</head>
<body>
<!--zoom controls-->
<a id="minusBtn" onclick="minus()">------</a>
<a id="plusBtn" onclick="plus()">++++++</a>
</body>
</html>trong Firefox sẽ không thay đổi zoom chỉ thay đổi quy mô !!!
Một lần nữa, ** đây là thu phóng CSS **, điều này không mong muốn bởi câu hỏi. –
Tôi không thể tìm cách thay đổi mức thu phóng trình duyệt thực tế, nhưng bạn có thể nhận được khá gần với CSS transform: scale(). Đây là giải pháp của tôi dựa trên JavaScript và jQuery:
<!-- Trigger -->
<ul id="zoom_triggers">
<li><a id="zoom_in">zoom in</a></li>
<li><a id="zoom_out">zoom out</a></li>
<li><a id="zoom_reset">reset zoom</a></li>
</ul>
<script>
jQuery(document).ready(function($)
{
// Set initial zoom level
var zoom_level=100;
// Click events
$('#zoom_in').click(function() { zoom_page(10, $(this)) });
$('#zoom_out').click(function() { zoom_page(-10, $(this)) });
$('#zoom_reset').click(function() { zoom_page(0, $(this)) });
// Zoom function
function zoom_page(step, trigger)
{
// Zoom just to steps in or out
if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;
// Set/reset zoom
if(step==0) zoom_level=100;
else zoom_level=zoom_level+step;
// Set page zoom via CSS
$('body').css({
transform: 'scale('+(zoom_level/100)+')', // set zoom
transformOrigin: '50% 0' // set transform scale base
});
// Adjust page to zoom width
if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
else $('body').css({ width: '100%' });
// Activate/deaktivate trigger (use CSS to make them look different)
if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
else trigger.parents('ul').find('.disabled').removeClass('disabled');
if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
else $('#zoom_reset').addClass('disabled');
}
});
</script>
Thu phóng trình duyệt là nội dung chỉ nên được kiểm soát bởi người dùng - không bao giờ là trang web. Nếu trang web có thể thay đổi mức thu phóng của trình duyệt, điều đó sẽ phá vỡ tính năng trợ năng cơ bản nhất mà trình duyệt có. Tôi sẽ xem xét bất kỳ phương pháp nào cho phép một trang web thay đổi thu phóng của trình duyệt thành một lỗi nghiêm trọng, bởi vì bất kỳ việc sử dụng tính năng đó sẽ là lạm dụng. – user57368
@unknown (google), vô nghĩa. Bạn chỉ là rất sai. Các điều khiển như vậy là vô giá để tạo các ứng dụng web phong phú trong javascript có thể đo lên đến flash và thứ hai trình duyệt có thể giới hạn các điều khiển thu phóng chỉ khả dụng với tương tác người dùng và không kiểm soát hoàn toàn. – Jourkey
Tôi thực sự cảm thấy mệt mỏi với toàn bộ "bạn không bao giờ nên XYZ". Vâng, đó là tất cả tốt và tốt trong một thế giới hoàn hảo, hoặc khi bạn đang viết một trang web hoàn toàn mới. Nhưng nếu trang web là một thập kỷ cũ, khách hàng sẽ không trả tiền cho một thiết kế mới, và các ông chủ của bạn mong bạn làm cho một trang web hoạt động trên một máy tính bảng, mà loại "bạn thực sự không nên" tâm lý có thể mất một trở lại nghiêm trọng -ghế. Nếu bạn biết làm thế nào để làm điều gì đó, hãy nói như vậy. Nếu không, thì đừng bình luận. Sắp tới các diễn đàn phun ra vô nghĩa vô nghĩa là vô ích, và thực sự khá thô lỗ. –