0 
$(button).click(function(){
    if (Modernizr.zoom()) $('body').animate({ zoom: '200%'; }, 1000);
    else $('body').alternative();
});

上記のように… クリックで自分のページにズームインしたい。

ところで「zoom」(css)って使っていいの？「zoom」(css) の適切な説明が見つからなかったため、わかりません。それとも「scale」(css)を使ってアニメートした方が良いのでしょうか?

主な質問: ブラウザがこの css-'zoom' (または何か) 機能をサポートしているかどうかを検出する方法はありますか? 私は Modernizr を使用していますが、Modernizr 内で「ズーム」が使用可能かどうかを検出するものは何もありません。

4

2 に答える 2

2

誰かがそれを必要とするなら...

ブラウザーが zoom プロパティをサポートしているかどうかを確認するためにmodernzrを使用します。

  if (Modernizr.testProp('zoom') === true) {
    someStuff()
  }

しかし、なぜ使用しないのtransformですか？この特定のプロジェクトでは、ブラウザのネイティブ ズームのようなものを作成して、すべての Web サイトをズームする必要があるため、Web サイトで使用するとtransform、すべてのフォントがクロムでぼやけますが、 を使用できzoom、非常にうまく機能します。

ただし、firefox はズーム プロパティを認識しないため、ズームが使用可能な場合はズームを使用し、使用できない場合はtransformズームを使用します。

if (Modernizr.testProp('zoom') === true) {
  zoomWithCSS()
}
else {  
 zoomWithTransformScale()
}

codepen の作業例。

于 2015-07-02T18:28:11.403 に答える
1

わかった。css zoom-property の使用は、IE および「実際の」ブラウザのいくつかの新しいバージョンでのみ機能するため、適切ではないことがわかりました。そして、パーセント値を含むレイアウトがある場合、幅または高さの値も変更する以外はズームしませんが、これは良くありません。

ただし、css3 の scale-property では機能します。したがって、Modernizr.csstransforms()機能検出（js用）を見つけました！

だから…それだけです！

于 2012-12-08T17:37:45.083 に答える