• ベストアンサー

スマホの縦・横を判別して別画像を出すことは可能?

スマホサイト(iPhone・Andoroid両方対応)の制作時に、 スマホの縦・横を判別して別画像を出すことはできますか? 現状は添付画像のように、 1.横640pxの画像を作成(文字を載せたい場合は左から320pxまでの所に描く) 2.背景画像で(1)の画像を指定 縦:左端から320pxの所までが見える 横:640pxまで見える ・・・という感じで作っていますが、 これを 縦用:横320pxの画像A.jpg 横用:横640pxの画像B.jpg を作成しておいて、スマホ縦の時はA.jpgを表示し、スマホ横の時はB.jpgを表示というようなことがしたいです。何卒宜しくお願いします。

  • CSS
  • 回答数2
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • axuaxua
  • ベストアンサー率36% (82/223)
回答No.1

http://kazu69.net/blog/memo/1023/ 上記サイトの中段辺りにあるorientationを参照してください。(書いてないのでandroid/iphone両対応かは不明です) orientation: portrait;/*縦*/ orientation: landscape;/*横*/

その他の回答 (1)

noname#206842
noname#206842
回答No.2

これは、ResponsiveLayoutを使用することで解決します。 閲覧者の環境に応じ、表示する形を変えるものです。 多くのフレームワークがあるので、そちらを参考にしてください。 Yaml4,skelton,bootstrapなどがお勧めです。

関連するQ&A

  • 【html】画像を横(縦)の長さだけ指定して縦(横)の長さは画像に合わせる

    画像を横(縦)の長さだけ指定して縦(横)の長さは画像に合わせる ということはできないんでしょうか? "auto"ではIEで表示できません 例 -- <img alt="test" width="300" height="auto" src="oma-n.jpg" /> --

  • ホームページで縦と横の写真を載せる。

    今写真を表示させるときに <IMG style="width:400px;height:300px;src="20060628_001.jpg"> という記述をしているのですがこれだと縦の写真がつぶれて表示されてしまっています。 考えてみたのですがjavascriptを使用し縦の写真か横の写真かをフラグをもたせてサイズを指定できればいいのですが何せ初心者で知識が乏しく、Googleで「縦 横 写真 html」とか「縦 横 写真 ホームページ」とかで検索しても見つかりませんでした。 なのでこちらでお力を貸していただきたく質問をさせていただきました。 どうかよろしくお願いします。 明日までに提出しないといけないので「3.直ぐに~」を選択させていただきました。

    • ベストアンサー
    • HTML
  • スマホの背景画像について

    タイトル通りスマホの背景画像について質問です。 初めて作成するので、まずはいろいろ調べたところ縦向きが320px で 横向きが480pxなので一般的にデザインカンプを作る際は320pxで作る ようなのでその通りにしております。 縦向きの場合には、サイズが合っているので表示もおかしくないのですが 横向きにしてしまうと間が空きます。 こんな問題があるので、できるだけ画像は使わないようにとのこともありますが 背景画像を使う場合、うまく表示できる方法はありますか? 例えば、480pxで背景画像を作りcss3のbackground-sizeを使い縦向きであれば 320pxで横向きであればそのまま表示させるようにするとか思いついたのですがこの 方法はありでしょうか?

    • ベストアンサー
    • HTML
  • ipadで縦と横のアクセスを判別する方法

    たびたび恐縮です。 ipadやiphoneでlandscape時とportrait時でviewportを切り替えたいと思っています。 Javascriptで判別することは可能でしょうか? if文で縦が横より大きければこっちのメタタグ、横が縦より大きければこっちのメタタグという風に書いて みたのですが、全く効きませんでした。 大変恐縮ですが、ご教示いただければ幸いです。 お忙しい中大変申し訳ございません。

  • 画像のランダム表示でサイズを指定する方法

    ヘッダー画像を、下記のコードでランダム表示しています。 横2000px縦1000pxの画像を、横1000px縦500pxで表示したい場合、どのようにすればよいでしょうか? <script language="JavaScript"> var imglist = new Array( "A.jpg" , "B.jpg" , "C.jpg" , "D.jpg" , "E.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> <noscript> <img src="A.jpg" alt="A.jpg" width="1000px" height="500px" border="0" /> </noscript> 上記コードの参照元:http://allabout.co.jp/gm/gc/23805/2/

  • 表示画面の解像度と画像のサイズ

    お世話になります。 画像を表示する、「画面の解像度」と画像のサイズについて 教えてください。 (1)画像サイズが大きい場合 「スマホの画面解像度:縦:960 横:640」の場合 A 画像の大きさ:縦960 横640 B 画像の大きさ:縦1920 横1280 質問:このスマホ画面で見た場合、AとBは「肉眼では」画質の違いはわからない程度でしょうか? (2)画像サイズが小さい場合 「スマホの画面解像度:縦:960 横:640」の場合 A 画像の大きさ:縦960 横640 B 画像の大きさ:縦480 横320 質問:このスマホ画面で見た場合、Bの方が、画質が荒いという認識でよいでしょうか? 以上よろしくお願いいたします。

  • 画像の横に画像を入れたいのだが...

    ホームページ作成初心者なのですが、 画像の横にテキストが行かなく画像の下に行ってしまい困ってます>< ちょっと今てこずってる所を貼りますがなにか間違ってるところがあれば ご指摘お願いします! <div align="right"> <a href="sirakage.html" onmouseover="onpoint.src='gyarariy2.jpg'" onmouseout="onpoint.src='gyarariy1.jpg'"> <img src="gyarariy1.jpg" align="middle" vspace="40" name="onpoint" border="0"></div></a> この次に画像のhtmlを入れてみるのですがダメダメで... 何卒宜しくお願いします!

  • jpg画像の縦と横のピクセル単位サイズの取得

    perlでjpg画像の縦、横のピクセルを取得する方法が解りません。 ピクセル取得後、計算して表示したいのですが。 よろしくお願いします。

    • 締切済み
    • CGI
  • 画像を縦で見たい・・・。

    携帯電話でビデオ撮影をしてPCに取り込みました。その後PCで再生した所画像が横になってました。撮影した時は縦だったのに何故横になってしまったのでしょう? このまま縦で再生する事は不可能なのでしょうか? どなたか教えてただければ嬉しいです。

  • エクセルで縦計と横計の一致を確認する関数

    縦の合計と横の合計が一致している場合は,OKと表示させ,違っている場合は,NOと表示させたいのですが,教えてください。 例 セルA1+B1の横計をC1       ・ ・     ・      ・ ・     ・      A5+B5の横計をC5     A6縦計,B6縦計,C6にはC1~C5の    縦合計としている場合, A6縦計+B6縦計     の横合計とC6の縦合計が一致しているか,    確認してC7にOK又はNOと表示させたい    のですが。初心者ですのでよろしくお願い致    します。

専門家に質問してみよう