ウェブコンテンツ（HTML、CSS、JavaScript）の特定の要素を拡大する

Question

ユーザーが携帯端末でウェブサイトをズームすると、自分のウェブサイト（特定の部門）の特定の要素のみをズームしたい。以下の写真は私の考えを示しています。あなたが見ることができるように

は、テストがズームされますが、トップのdivは、同じサイズのままです。テストを含むdivのみがズーム/スケーリングされます。

誰かに私にこれを達成するためのヒントを教えてもらえますか？私は本当にどこから始めるべきか分かりません。

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

擬似コード：

container.mousemove { 
    content.changeWidth();.. 
} 

Answer 1

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

ビューポートの固定は、あなたのHTMLのhead要素で起こる：

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

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

挟み込み中の2つのタッチポイント間の距離の変化は、event.gesture.scale（see hammer documentation）で表され、縮尺が増加すると、それに応じてテキストが増加します...減少するとテキストサイズが減少します。使用数学：

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

私はあなたのコードやフィドルの一部を貼り付け

Answer 2

あなたはZoomoozプラグインを使用することができます。ドキュメント内には、Zooming inside a containerセクションを確認 - これはあなたが必要とするかもしれないものである。

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

Check the JS Fiddle