回答
在IE中:
alert(window.parent.document.body.style.zoom.toString());
,你可以設置瀏覽器縮放
window.parent.document.body.style.zoom = 1.5;
天哪,我認爲你有它 - 然後,不幸的是,我認爲這是CSS縮放屬性而不是瀏覽器縮放 - 如果你這樣做,那麼兩者會相互對立。另一方面,如果您有媒體斷點,它們將不會觸發像CTRL +瀏覽器縮放那樣的縮放尺寸。 – cirrus 2014-09-16 08:51:30
既然你已經標記jQuery中也(雖然在問題的標題只寫JS)我想補充一點答案
您可以將以下css添加到網頁以放大瀏覽器窗口
body {
-moz-transform: scale(0.8, 0.8);
zoom: 0.8;
zoom: 80%;
}
所以,你的jQuery成爲任何跨瀏覽器
$(document).ready(function(){
$('body').css('zoom','80%'); /* Webkit browsers */
$('body').css('zoom','0.8'); /* Other non-webkit browsers */
$('body').css('-moz-transform',scale(0.8, 0.8)); /* Moz-browsers */
});
別擔心,因爲任何難以理解的CSS屬性會被瀏覽器所避免。
非常感謝!另外,你不需要那個jQuery代碼。它只能用於CSS – amanuel2 2016-04-30 20:38:02
結算這jsfiddle。您可能使用的東西,但它不是像瀏覽器放大縮小那樣的確切功能。
$('#zoom-in').click(function() {
updateZoom(0.1);
});
$('#zoom-out').click(function() {
updateZoom(-0.1);
});
zoomLevel = 1;
var updateZoom = function(zoom) {
zoomLevel += zoom;
$('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });
}
這是我使用CSS transform:scale()和JavaScript/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>
- 1. 縮放瀏覽器窗口時自動縮放網站
- 2. 如何縮放SVG圖像以填充瀏覽器窗口?
- 3. 縮放圖像高度的瀏覽器窗口
- 4. 使用瀏覽器窗口縮放網頁
- 5. 使用瀏覽器/設備窗口對SVG進行縮放
- 6. JavaScript:使用瀏覽器打開窗口
- 7. 將瀏覽器內容縮小到瀏覽器窗口大小
- 8. 在Javascript中,如何檢測瀏覽器窗口在視圖中?
- 9. 禁用瀏覽器縮放
- 10. Android 4.1+(Javascript瀏覽器):如何禁用旋轉縮放/縮放?
- 11. Svg多邊形不會與瀏覽器窗口縮放
- 12. 當瀏覽器窗口垂直縮放時CSS調整失敗
- 13. 按比例縮放的網站,以適應瀏覽器窗口
- 14. 移動瀏覽器窗口的高度和頁面縮放
- 15. 縮放文本相對於瀏覽器窗口中的位置。
- 16. 獲取瀏覽器窗口的位置,無論縮放
- 17. 多瀏覽器窗口拖放界面
- 18. 使用javascript檢測瀏覽器視口
- 19. 模仿JavaScript的瀏覽器縮放
- 20. JavaScript中的跨瀏覽器調整瀏覽器窗口
- 21. 在非移動瀏覽器中縮放視口
- 22. 在javascript中檢測瀏覽器窗口
- 23. 關閉瀏覽器窗口javascript for blackberry
- 24. javascript文件瀏覽器窗口
- 25. Javascript登錄瀏覽器彈出窗口
- 26. Javascript設置瀏覽器窗口大小
- 27. 瀏覽器縮放和.SVG圖片
- 28. 簡單的jQuery圖像縮放 - 溢出瀏覽器窗口大小
- 29. 從自定義WebKit瀏覽器視圖啓動新的瀏覽器窗口
- 30. 如何識別在瀏覽器中播放視頻的窗口
讓這個由用戶決定。我想不出任何你應該這樣做的實例,缺少一個瀏覽器插件。 – Brad 2012-03-21 03:45:04
Duplicate http://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript – elclanrs 2012-03-21 03:47:56
最好說出爲什麼要檢測縮放(它可以通過多種方式完成,而不僅僅是使用滾動),因爲它是不可能的,你可以在瀏覽器中可靠地做到這一點。 – RobG 2012-03-21 04:04:41