JavaScript を使用してドキュメント全体をズームアウトするにはどうすればよいですか?
私の目標は、組み込みのブラウザーのズームを模倣し、ドキュメント全体を 90% にズームすることです。
使ってみました
document.body.zoom
これは でのみ機能しexplorer
、ページが乱雑になります (多くの要素が動き回っています)。
これを行う方法はありますか?
JavaScript を使用してドキュメント全体をズームアウトするにはどうすればよいですか?
私の目標は、組み込みのブラウザーのズームを模倣し、ドキュメント全体を 90% にズームすることです。
使ってみました
document.body.zoom
これは でのみ機能しexplorer
、ページが乱雑になります (多くの要素が動き回っています)。
これを行う方法はありますか?
使用する:
document.body.style.zoom=1.0;this.blur();
1.0 は 100% を意味します
150% は 1.5 1000% は 10.0
this.blur() は、おそらく入力フィールドを選択したカーソルが、すべての選択項目のフォーカスを失うことを意味します。
また:
Firefox では、javascript または sth を介してユーザー プロパティにアクセスできないため、ブラウザでのズームが許可されていません。
そのため、ズーム (CSS3: 上記のズーム) やテキスト サイズの拡大を可能にするいくつかの CSS スタイルを使用することができます! たとえば、別のCSSファイルを含めることでこれを行うことができます。しかし、スタイル化された css 要素 (floated など) は、実際にはそれらの属性とは異なる「相互作用」する必要があるため、「ジャンピー」問題があります。
上に投稿したズームは、Chrome と IE8+ でうまく機能します (前述のように FF はサポートされていません)。
- 追加情報:
これは、ズーム オプションを使用して正確にズームする方法の例です。適用例はこちら
ズーム オプションは通常、ブラウザと同じようにズームを処理します。
しかし、これはまだすべてのものであり、Firefox や Safari や Opera ではサポートされていませんか? クロムとIEで動作します!
別の解決策は次のとおりです。メインのサイズを「em」に配置し、100%、110% (css 全体) などのサイズを設定して回避します。したがって、異なる CSS ファイルを使用することができ、% 属性を「単に」置き換える必要があります。
それでも、他の解決策があるとは思いません! :(
CSS 変換を使用した私のソリューションは次のとおりです: scale() および JavaScript / jQuery:
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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 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>
私はjqueryでこれを行い、Firefox、Safari、Chrome、IE9+で動作します:
window.onload = function() {
var currFFZoom = 1;
var currIEZoom = 100;
$('#In').on('click', function() {
if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) { //Firefox
var step = 0.02;
currFFZoom += step;
$('body').css('MozTransform', 'scale(' + currFFZoom + ')');
} else {
var step = 2;
currIEZoom += step;
$('body').css('zoom', ' ' + currIEZoom + '%');
}
});
$('#Out').on('click', function() {
if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) { //Firefox
var step = 0.02;
currFFZoom -= step;
$('body').css('MozTransform', 'scale(' + currFFZoom + ')');
} else {
var step = 2;
currIEZoom -= step;
$('body').css('zoom', ' ' + currIEZoom + '%');
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="Out" value="Zoom Out"/>
<input type="button" id="In" value="Zoom In"/>