• 締切済み

iPhoneサイトで横向き時自動でピンチインして表示するjavascr

iPhoneサイトで横向き時自動でピンチインして表示するjavascriptはありますか? orientationchangeというものを使えば、傾いたことを取得することが出来ることはわかったのですが、それを検出して、自動で縮小する方法がわかりません。 そのようなことは可能でしょうか? そもそも、なぜそのようなことがしたいかと言いますと、 タテ表示の際に、縦幅ぴったりのサイトにしているのですが、 ヨコ表示にしたときも、縦幅をそのときのたてのサイズにぴったりに表示したいのです。 通常は、ヨコ表示にすると、横幅サイズが増えるため、少し拡大されてしまいます。 タテスクロールが基本なので、当然ではあるのですが、今回は、ヨコにしたときにも、タテ幅をぴったりにしたいのです。 ご存知のかたおられましたらどうぞご教授ください。

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

これ↓参考になりません http://www.bute-studio.com/mt/mt-search.cgi?tag=iPodTouch&blog_id=5&IncludeBlogs=5 ※window.orientationchangeイベントで縦横切り替わりを検値するみたいです。 縦・横によってCSSのクラスを切り替えてるみたいです。

関連するQ&A

  • iPhone横向き表示

    iPhone6を使っています。 寝転んで横になって触ってたら 画面が自動的に横向きになりますが 横向き表示にならないようにはできないのでしょうか?

  • IE7で表示が拡大される

    新規購入したパソコンでブラウザをIE7にしたら、表示するサイトの縦横とも拡大されて、これまでのバージョンでは横幅はぴったり画面にはまっていたのに、横スクロールしないと右1/4ほどが見えなくなってしまいました。全画面表示にしても文字の大きさを小さくしても縮小しても、見難さは変わりません。 閲覧しているサイトに合わせた横幅表示にするにはどうしたらいいのでしょうか?

  • ウィンドウの大きさに合わせて拡大縮小するサイトが作りたい

    ウィンドウの大きさに合わせて拡大縮小するように表示するにはどうすればいいでしょうか? ブラウザのサイズによって画像全部が拡大したり、縮小されたりするやり方はどうすればいいのでしょうか? 今作成しているサイトは、Dreamweaverで作成した 横1000ピクセル縦600ピクセルのサイトです。 ブラウザの小さいものには下が切れてしまい、 ブラウザの大きいものは下がかなり空いて見えるようです。 ブラウザのサイズによって拡大して見えたり、縮小して見えたりするには どうすればよろしいでしょうか? 分かる方どうかよろしくお願いいたします。

  • iPhoneサイトのフォームを拡大したら戻らない

    スマートフォン向けサイトのHTMLをコーディングしています。 会員登録フォームのページです。 フォーム欄に入力しようとすると、自動的にページが拡大されます。 一度拡大されてしまうと、一旦ページを落として再度開かないと縮小できません。 そのため、拡大された状態なので画面が左右にぶれてしまい、 下方向への操作がしづらくなります。 ユーザーにタッチして縮小してもらう他方法はないでしょうか? ちなみにメタタグに以下のように記述しました。 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=1.5, minimum-scale=1.0, "> user-scalable=noとすると拡大はしないのですが、 フォームの入力欄が小さすぎて見づらくなります。 HTMLは横幅を指定しないグリッドレイアウトです。 CSSはfont-size: 10pt; 他はフォームの横幅を最大200pxに指定している程度の シンプルなページです。

    • ベストアンサー
    • HTML
  • Excel印刷時に列幅を自動調整したい

    教えてください。 Excelで印刷時に列幅を自動的に調整して印刷したいと思っています。 たとえば印刷プレビュをしたときに列数が多くてページが2ページ目まで行ってしまったとします。 このとき印刷サイズの拡大/縮小でA4サイズにするのではなく、自動的に列の幅を変更(縮小)してA4サイズに収まるようにしたいのです。 VBAではなくExcelでもともと提供されている機能として、こういった機能はありますでしょうか?

  • iモードって自動的に拡大表示されるのですか?

    iモードってウェブページを見ると自動的に拡大表示されてしまう仕様なのでしょうか。 私の液晶は480x854の超高解像度です!! これは10ピクセルの文字なら、1行に48文字表示できる計算なのですが、実際には10文字ぐらいしか表示されません。 文字が4倍ぐらいに拡大されていると思われます。 CSSで厳密に文字サイズを指定しても無視されてしまうようです。 画像に関しては、横の長さが240ピクセルの画像が画面の横幅いっぱいに表示されています。ようは2倍に拡大されてしまっているわけです。 <IMG width="240">のように厳密に画像の横幅を指定しても無視されてしまうようです・・・。 iモード専用のHTMLタグが存在するのでしょうか。 iモードの文字を4倍、画像を2倍に拡大表示する機能を無効にしたいです。

  • ドリームウィーバーで画像を縮小

    すいません。ドリームウィーバーCSを使っているのですが、 CSSを使った部分でちょっと分からないことがあります。 divで囲って、幅250ピクセルに指定したとします。 そこへ幅500ピクセル、縦1000ピクセルを入れて、自動的に画像を縮小させたりする事は できるのでしょうか? 事前に何かのソフトで画像を縮小してから放り込めば解決なのですが、大量の画像があるため 画像を加工に非常に時間がかかります。 いろいろCSSのボックスなどの設定を試してはいるのですが、上手くいきません。 私が行いたいのは、上記のサイズのdivで、画像を入れると横幅は50%になりますよね? その後自動的に縦幅も50%となり、画像が歪むことなく、縮小した画像が表示できたら良いと 考えています。 実際は画像の半分だけ表示されスクロールバーが付いたりします。(このあたりはオーバーフロー設定で変わりますが・・) もし上記が可能ならやり方を教えてもらえると助かります。

    • 締切済み
    • CSS
  • スマフォサイト制作での画像幅の拡大縮小について

    2枚の画像バナーを横に並べたいのですが、 端末画面の横幅を想定して画像を作成してしまうと、 横に回転して閲覧した際小さく表示されてしまいます。 これを拡大させて表示させたいです。 文章が分かりづらいので画像を添付しました。 あくまで例なのですが、 480×854のスマフォ端末を想定した場合、 画像バナー(各リンク設定あり)を225pxの横幅で表示し、 バナーの上下左右に10pxの余白を残したい時。 これを横回転した際(854×480)、 横幅225pxで固定して作成しまうと、 バナーが小さく表示されてしまいます。 これを、横回転した時にも拡大されるようにしたいのです。 端末によっては480px以上に横幅の広い画面もあるかと思うので… 縦幅がその分広がっても構いません。 横1枚画像を置きたいのであれば、 width:100%;で対応可能かと思うのですが、 画像バナーそれぞれにリンクを設置したいので 別箇要素を設けたいです。 考え方としては、paddingの幅を固定にして、 画像を端末によってブロック要素の横幅100%まで拡大できるように できれば理想なのですが… スマートフォンサイト制作で詳しい方、 何か策がございましたら、ご教授いただけますと幸いです。 よろしくお願いいたします。

    • 締切済み
    • CSS
  • Fireworksのバッチ処理って記憶できますか??

    いつも同じサイズに画像を一括縮小しています。 (例)サイズに合わせて拡大・縮小        ↓    ヨコ 800ピクセル タテ 任意 この処理を記録させてさらに効率化をはかりたいのですが可能でしょうか?

  • PC版Operaで拡大時に文字を自動改行したい。

    PC版Operaの設定について質問させてください。 Android版のOperaMobileでは、画面を拡大ズームした時に、テキストを自動的に画面の幅に合わせて改行・整形してくれます。 これと同様の動作をPC版Operaで実現したいのです。 PCのOSはWindowsXPですので、Operaの画面拡大をAndroidのようにピンチインでは出来ませんが、 「Shift」+「+」で拡大することができます。しかし拡大していくうちにテキスト幅が画面横幅を超えてしまい、横スクロールしなくてはならなくなります。 この時に、画面幅に合わせてテキストを自動改行・整形して欲しいのです。 よろしくお願い致します。 ■使用環境 PCのOS:WindowsXP Opera10.53 Build 3374 *Operaのバージョンは最新ではありません。最新バージョンでは質問事項を実現出来るのかもしれませんが、タブやメニューバーの配置を好みに設定出来ないことから、敢えて旧バージョンのOperaを使用しています。最新のバージョンなら希望の事を出来るなどの情報でも結構ですのでよろしくお願い致します。 ■自分で試したこと・調べたこと ・Operaのフォーラムがあるようで、Q&Aの記事を探しましたが見つかりませんでした。 ・Opera10.53の設定の中に「画面幅で改行」というのがあり、ONにしてみましたが希望の動作には成りませんでした。 ・Webで検索しましたが見つかりませんでした。

専門家に質問してみよう