web-dev-qa-db-ja.com

Webコンテンツの特定の要素をズーム（HTML、CSS、JavaScript）

ユーザーがモバイルデバイスでWebサイトをズームした場合、Webサイトの特定の要素（特定のdiv）のみをズームしたい。次の写真は私のアイデアを示しています。

enter image description here

ご覧のとおり、テストはズームされていますが、上部のdivは同じサイズのままです。テストを含むdivのみがズーム/スケーリングされます。

誰かがこれを達成する方法についていくつかのヒントを教えてもらえますか？どこから始めればいいのか本当にわからない。

更新： http://jsfiddle.net/WyqSf/ 。このページを拡大すると、両方の要素が拡大縮小されます。ズーム時にコンテンツ要素のみを調整したい。これを達成するために私が考えることができる1つの方法は、ユーザー入力を取得し、JavaScriptを使用してdivの幅を調整することですが、これは通常の動作とは矛盾します。

疑似コード：

container.mousemove {
   content.changeWidth();..
}
javascriptcssresponsive-designtouchzoom
23
Bram

これを行うには、ユーザーがページをピンチズームできないようにユーザーのビューポートを修正し、次に Hammer.js のようなタッチイベントライブラリを使用して、ピンチズームジェスチャーにコールバックをアタッチする必要があります。スケーリングするページの要素のサイズを適切に変更します。

ビューポートの修正は、htmlのhead要素で行われます。

<meta name="viewport" content="width=device-width, maximum-scale=1.0">

hammer.jsを使用して「ピンチズーム」ジェスチャーを検出します。ライブラリは非常に詳細なevent.gestureオブジェクトを提供します。これを使用して、ユーザーがズームしている速度/速度を検出できます。

ピンチ操作中の2つのタッチポイント間の距離の変化は、event.gesture.scale（ ハンマーのドキュメントを参照 ）で表されます。スケールが増加する場合は、それに応じてテキストを増やします...減少する場合は、テキストを減らします-サイズ。数学を使う：

$('body').hammer().on("pinch", function(event) {
    console.log(event.gesture.scale);
    // do math...
});

私はあなたがアイデアを得ることを想像します...

16
1nfiniti

Zoomooz プラグインを使用できます。ドキュメント内で コンテナ内のズーム セクションを確認してください-これはあなたが必要とするものです：

<div class="zoomViewport">
    <div class="zoomContainer">
        <div class="zoomTarget">Target 1</div>
        <div class="zoomTarget">Target 2</div>
    </div>
</div>

JSフィドルを確認

0
Arun Bertil