Ich muss zwei Schaltflächen auf meiner Website erstellen, die die Zoomstufe des Browsers ändern (+) (-). Ich fordere Browser-Zoom und nicht CSS-Zoom wegen Bildgröße und Layout-Probleme.Ändern der Browser-Zoomstufe
Nun, ist das überhaupt möglich? Ich habe widersprüchliche Berichte gehört.
Ich würde sagen, in den meisten Browsern nicht möglich, zumindest nicht ohne einige zusätzliche Plugins. Und in jedem Fall würde ich versuchen, mich nicht auf den Zoom des Browsers zu verlassen, da die Implementierungen variieren (einige Browser zoomen nur die Schriftarten, andere zoomen die Bilder, usw.). Es sei denn, Sie interessieren sich nicht sehr für die Benutzererfahrung.
Wenn Sie einen zuverlässigeren Zoom benötigen, können Sie die Seitenschriftarten und Bilder mit JavaScript und CSS oder möglicherweise auf der Serverseite vergrößern. Die Bild- und Layout-Skalierungsprobleme könnten auf diese Weise behoben werden. Das erfordert natürlich etwas mehr Arbeit.
In IE nicht möglich, da die UI Zoom-Schaltfläche in der Statusleiste nicht skriptfähig ist. YMMV für andere Browser.
es ist möglich in IE window.parent.document.body.style.zoom = 1.5; –
Original-Poster fragt ausdrücklich nach "nicht CSS-Zoom". –
Sie können die CSS3 zoom function verwenden, aber ich habe es noch nicht mit jQuery getestet. Versuche es jetzt und lass es dich wissen. UPDATE: getestet, funktioniert aber es macht Spaß
leider, zoom property ist keine crossbrowser lösung ... –
ja, total nicht. Irgendeine Idee für Cross-Browser? UPDATE: keine Notwendigkeit, nur den Post oben überprüft! Prost –
Scheint in Chrome und Safari, aber nicht in Firefox zu arbeiten. – Ansjovis86
Versuchen Sie, ob dies für Sie funktioniert. Dies funktioniert auf FF, IE8 + und Chrome. Der else-Teil gilt für Nicht-Firefox-Browser. Obwohl dies einen Zoom-Effekt ergibt, ändert es den Zoom-Wert auf Browser-Ebene nicht.
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 + '%');
}
});
Sie jquery 1.8.3 oder jquery Migrate-Plugin (um $ .Browser) –
+ funktioniert nicht in der Oper –
Diese haben muss, wird CSS – SmallChess
möglich in IE und Chrom, obwohl es nicht in Firefox funktioniert:
<script type="text/javascript">
function toggleZoomScreen() {
document.body.style.zoom="80%"
}
</script>
<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">
Jourkey ausdrücklich * nicht * gefragt CSS-Zoom – kmkaplan
Dies ändert nur den CSS-Zoom-Wert inline auf body, was genau das Gegenteil von dem, was die Frage gestellt hat, tut. – mystrdat
Vergessen Sie nicht, dass dieser Zoom-Zustand wahrscheinlich persistent in einer Sitzungsvariablen gespeichert und verwaltet werden muss und bei jedem Laden der Seite erneut abgespielt werden muss. –
<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>in Firefox den Zoom nur Skala ändern wird sich nicht ändern !!!
Noch einmal, ** das ist CSS Zooming **, was bei der Frage unerwünscht ist. –
Ich konnte keinen Weg finden, die tatsächliche Zoomstufe des Browsers zu ändern, aber Sie können mit CSS-Transformation ziemlich nah kommen: scale(). Hier ist meine Lösung basierend auf JavaScript und 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>
Browser Zoom ist etwas, das nur vom Benutzer gesteuert werden sollte - niemals die Website. Wenn die Website die Zoomstufe des Browsers ändern kann, wird die grundlegendste Barrierefreiheitsfunktion der Browser aufgehoben. Ich würde jede Methode in Betracht ziehen, die es einer Website erlaubt, den Browser-Zoom zu einem ernsthaften Fehler zu machen, weil jede Verwendung dieser Funktion Missbrauch wäre. – user57368
@unknown (Google), Unsinn. Du liegst einfach sehr falsch. Solche Steuerelemente sind von unschätzbarem Wert für die Erstellung von Rich-Web-Anwendungen in Javascript, die Flash messen können, und zweitens können Browser die Zoom-Steuerelemente so einschränken, dass sie nur mit Benutzerinteraktion verfügbar sind und nicht die volle Kontrolle bieten. – Jourkey
Ich bin wirklich müde von der ganzen "Sie sollten nie XYZ". Ja, das ist alles gut und gut in einer perfekten Welt oder wenn du eine brandneue Seite schreibst. Aber wenn die Website ein Jahrzehnt alt ist, wird der Kunde nicht für ein neues Design bezahlen, und Ihre Chefs erwarten, dass Sie eine Website auf einem Tablet arbeiten lassen, diese Art von "Sie sollten wirklich nicht" -Mentalität kann einen ernsten Rücken tragen -Sitz. Wenn du weißt, wie du etwas tun kannst, sag es. Wenn nicht, dann kommentiere nicht. Auf Foren zu stoßen, die pedantischen Unsinn ausspucken, ist nicht hilfreich und eigentlich ziemlich unhöflich. –