あなたの習慣について教えてください!!

ページ全体の拡大/縮小をJavaScriptにて行いないたい(対象はIEのみ)のですが、検索をしてみると、「文字サイズの拡大/縮小」や「画像の拡大/縮小」はよく見つかるのですが、ページ全体の拡大/縮小のサンプルを掲載しているページはあまり見かけません。

検索("ページ ズーム javascript"等のキーワードで)で何件か見つかって、試してはみたのですが、それらのプログラムですと、私のほうのHTML+CSSで使用すると、何とも説明しがたいおかしな挙動をしてしまいます。HTML+CSSの見直しも色々行ってみたのですが、なかなか改善されません。

みなさんがご存知のJavaScriptのサンプル(ページ全体の拡大/縮小)が掲載されているURLを教えていただけますでしょうか?
教えていただいたサンプルを実装し、色々探ってみたいと思っています。

※ちなみに、イメージは↓このような感じです。
http://appleworld.com/4tr/

A 回答 (4件)

「zoomプロパティ IE バグ」をキーワードに検索してみたんですが、


結構不具合が報告されてます。
 特にIE7からIE8に変わった時に大きく変わったみたいです。
http://blog.webcreativepark.net/2009/03/30-12573 …

※もともとIEの機能で、仕組みの詳細はマイクロソフトの企業機密
だとか、。。。(本当かしら?)
    • good
    • 1
この回答へのお礼

ご回答ありがとうございました。やはりIEは厄介者ですね。。
私のほうで出たエラーは、ページを(<div id="container">を)センター揃えにしているんですが、拡大縮小が左揃えで行われてしまい(IE8の時のみ)、縮小すると左にズレていく、拡大すると右にズレていく、というものでした。HTMLやCSSの構造も色々見直してみたのですが、なかなかうまくいきません。
しかし、やはり考えられるのは、HTMLとCSSとの兼ね合いに原因があると思われるのですが・・・。そこで、試しに、JavaScriptを変えてみようと思ったのです。他のサンプルコードをご存知でしたら、お教え願います。
ちなみに、IE8のブラウザの右下の「拡大レベルの変更」を使用すれば、正常に拡大縮小されます。このようになってくれると助かるのですが・・。

お礼日時:2010/03/23 16:45

画面の解像度によりCSSを変更していますので、下記URLの内容は使用していませんが


表示サンプル画面では、suni_034さん質問内容と思いますが

参考URL:http://javascript123.seesaa.net/article/11285038 …
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
参考URL、拝見いたしました。こちらもIE8では、ページ全体の拡大・縮小はイメージどおりに行われているのですが、
広告バナー部分が拡大・縮小せず、かつ、左右にずれていくという現象は見られますね。。。

お礼日時:2010/03/25 17:03

body部のスタイル属性のzoomプロパティによる拡大・縮小は


IEだけの拡張機能ですが、IEでもうまくいかないという質問ですか?。

この回答への補足

はい、おっしゃる通りです。IEでうまくいきません。
さらに、今まで試したサンプルコードですと、ver.6、7、8でそれぞれ、挙動が違うのです。よろしくお願いします。

補足日時:2010/03/23 13:43
    • good
    • 0

そこをのぞいたら


<a href="javascript:void(s=document.body.style);void(z=s.getAttribute('zoom'));if(z){s.setAttribute('zoom',(parseInt(z)+20)+'%');}else%20s.setAttribute('zoom','120%');">画面を拡大</a>
<a href="javascript:void(s=document.body.style);void(z=s.getAttribute('zoom'));if(z){s.setAttribute('zoom',(parseInt(z)-20)+'%');}else%20s.setAttribute('zoom','80%');">画面を縮小</a>
なのが・・・

この回答への補足

ご回答いただき、ありがとうございます。
申し訳ございませんが、こちら(下記)は既にテストしてみたのですが、正しく拡大/縮小が行えませんでした。他のサンプル等をご存知でしたら、ご教授願います。

<a href="javascript:void(s=document.body.style);void(z=s.getAttribute('zoom'));if(z){s.setAttribute('zoom',(parseInt(z)+20)+'%');}else%20s.setAttribute('zoom','120%');">画面を拡大</a>
<a href="javascript:void(s=document.body.style);void(z=s.getAttribute('zoom'));if(z){s.setAttribute('zoom',(parseInt(z)-20)+'%');}else%20s.setAttribute('zoom','80%');">画面を縮小</a>

補足日時:2010/03/23 12:20
    • good
    • 0
この回答へのお礼

ご回答、ありがとうございました。

お礼日時:2010/03/23 16:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


おすすめ情報