- ベストアンサー
パソコンとスマホで、表示倍率をわけたい
画像のサイズについて パソコンで表示するなら100％のサイズ、 スマホで表示するなら200％のサイズ、 と条件分岐するにはどうすればいいでしょうか？ HTMLのタグかcssで可能ですか？
- augppjqhooxao
- お礼率83% (31/37)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
確実にやりたいならサーバー側のプログラムで エージェントを判断して設定を振り分けることになります なんとなくでよければjavascriptなどで環境にあわせて cssを変更する処理がよいかと
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
質問の意味がわからないのですが、 ＞パソコンで表示するなら100％のサイズ、 ＞スマホで表示するなら200％のサイズ、 だと画像サイズの横幅が640pxだとパソコンだと480pxでディスプレイの数分の一、スマホだったらはみ出すかしてしまう。スマホだったら自動縮小されるのでもっと複雑。 普通にリキッドで製作するなり、CSS3のMedia Queriesを使ってスタイルシートを切り替えるのですが・・
お礼
ご回答ありがとうございました。
関連するQ&A
- タグを入れてるのにスマホ用サイズで表示されない
スマホならスマホ用サイズで表示されるように、 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" > を入れていて、今まで問題なく表示されていたのですが、 タグをいじったら、スマホでもＰＣサイズで表示されるようになってしまいました。 上記のコードはいじってないので、入れっぱなしです。 タグヲいくつか変更したので、どれが原因なのかわからないのですが、 今までは同じページ内にスタイルシートを書いてたのですが、 <link rel="stylesheet" type="text/css" href="http://Server/test.css">" のようにして、読み込むように変更しました。 これが原因なのでしょうか？
- 締切済み
- CSS
- htmlでのサイト作り、スマホでの表示
初めてhtmlでサイトを作りました。 金銭的に厳しく、タグもそこそこ勉強してメモ張だけで制作したのですが、 かなり自分の思ったように作ることが出来て満足していました。 そして今日fc2ホームページでサーバーをお借りし、初めてスマートフォンで 閲覧してみました。 するとパソコンで見ていたものと異なり、 大きな画像・テーブルは正常に表示されたのですが、 小さな画像・文字が変なところで改行されてしまい、見栄えが非常に悪く困っています。 スマホのページ自動調節機能を外せばパソコンで見た通りに表示されるので サイトマップに注釈を付けたのですが 見に来てくださった方々皆様にそのようなことを命令してしまうのは失礼だと思うんです。 なので、出来れば改善方法を教えてください。 どんなタグを追加すればいい等を知りたいです。 パソコンでの見栄えを悪くしたくないのでテーブルのサイズや文字一行の幅を削りたくありません。 全くの初心者なのでお手柔らかにお願いいたします。 また、スマホはAndloid、バージョン4.1.2を使用しています。
- ベストアンサー
- その他（スマートフォン・携帯・タブレット）
- サイトのスマホ表示について教えてください。
同じＨＭＴＬファイルで、ディスプレイサイズに応じて異なる2つのCSSを読み込ませています。 サブドメインや、別ディレクトリーに、スマホ用のhtmlファイルはありません。 同じHTMLで別々のCSSです。 大手サイトでは「スマホサイトはこちら」、「ＰＣ版はこちら」というリンクをよく見かけます。多くのサイトは、スマホ用のディレクトリーやサブドメインに飛ぶようなのですが、これを、サブドメインやスマホ用のディレクトリーを使わずに、一つのhtmlファイルで行うには、どうすれば良いのでしょうか？
- 締切済み
- CSS
- 素人なんですがホームページを作っております。
素人なんですがホームページを作っております。 質問の内容が「PCとスマホで違う大きさのバナーを表示したい」という事になります。 ホームページに大きなサイズのバナーを貼っています。 PCで見る分には問題ないのですがスマホで見るとはみ出ています。 なのでスマホで見る時には、別の小さなバナーを表示出来ればと思っております。 ネットで調べて見ると「ifを使うと出来る」「条件分岐でできる」と書いてあったのですがPHPやjavaスクリプトの知識が必要みたいなのです。 ただ素人でプログラムの知識が全く無いので、出来ればHTMLとCSSだけでバナーの条件分岐が出来るセレクタがあればと思うのですが可能でしょうか？ 大変申し訳ございませんが宜しくお願いします。
- 締切済み
- CSS
- HTML、CSS、スマホの時だけ全画面表示にしたい
パソコン向けにサイトを作成しまして、横幅800pxと指定しているのですが、スマホで表示すると全画面表示の方が見やすいので、スマホの時だけ全画面表示にできるHTMLかCSSの指定方法はありますか？ パソコンで表示させた時は、横幅800pxのままにしたいです。
- ベストアンサー
- その他([技術者向] コンピューター)
- グーグルカレンダーのスマホでの表示
グーグルカレンダーのタグをPCサイトに埋め込んでいるのですが、それをCSS でwidth="100%" にしても、左に偏って、画面も小さく見づらいどころか、 放っておくと縦に 伸びるという奇妙な動きをします。 グーグルカレンダーをスマホでうまく表示させるにはどうしたらよいのでしょうか？
- ベストアンサー
- HTML
- PCかスマホか判別し、CSSを振分ける方法はあるか
いくつかサイトを持っていますが、現在のPCサイトをスマホにも対応させたいと考えております。 <私の認識><やりたいこと><質問>に分けましたので、よろしくお願いいたします。 <私の認識> １．現状、まだHTML5に対応していないブラウザがある。 ２．PC用サイトとスマホサイトをHTMLレベルで作り分けると、アクセス数が分散してしまう。 ３．.PC用サイトとスマホサイトをHTMLレベルで作り分けると、更新作業が煩雑になる。 <やりたいこと> 「ブラウザがPCなのかスマホなのかを見分けて、CSSを振り分けたい。」 １．.PCサイトの画像数や表現力は維持し、スマホサイトは画像量を抑える為に、画像をCSSのbackground-image:url(xxx.png)で表示させれば、PCには大きい画像、スマホは小さい画像を使った表現ができるのではないか。 ２．PCサイトは幅固定、スマホサイトはリキッドデザインにして各画面幅に対応させられるのではないか。 <質問> 1.上記<認識>で間違っている部分はありますか？ 2.上記<やりたいこと>の、「ブラウザがPCなのかスマホなのかを見分けて、CSSを振り分ける」方法はありますか？ 調べたところ、画面の幅に応じてCSSを振り分けることはできようですが、各幅毎にCSSを作るというのも難しいので、スマホはリキッドデザインで各幅に対応したいと思っています。 よろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- ワードプレス パソコンとスマホでの画像表示サイズ
現在、ワードプレスでホームページを作成しています。 画像化したデータでランディングページのようなものを作成したいのですが、パソコンでの表示とスマホでの表示がイメージどおりにできず困っております。 【現状】 パソコン→全画面表示となっており表示サイズが大きすぎてみずらい スマホ→なぜか画像右側に余白ができ、全画面表示とならない 【理想】 パソコン→画像両サイドに若干の余白をもたせ、見やすくしたい スマホ→全画面表示とすることで見やすくしたい 色々と調べながら""width="100%;" height="auto;"とすることで表示サイズを大きくすることまではできましたが、まだまだ理想の状況からは遠い状態です。 下記は作成中のページです。http://uchikuru.jp/%E3%83%A9%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%9A%E3%83%BC%E3%82%B8 どうすれば理想の状態に近くなるのかどなたか教えていただけないでしょうか？？
- 締切済み
- CSS
- 携帯サイト(ガラケー)をスマホで表示時の文字サイズ
携帯サイトをスマホで表示した際に、文字サイズが小さく読みづらいので スマホでアクセス時のみ、文字サイズを大きくしたいのですが 以下のタグを、htmlファイルのbody内に追記したのですが iphoneは問題なく大きく表示されましたが androidでは携帯サイトの文字サイズのままになってしまいます。 <html style="-webkit-text-size-adjust:150%;"> androidでも文字を大きくしたい際にはどのようにすればよろしいでしょうか？ 希望としては別にCSSファイルを作らずに、携帯とおなじhtmlファイルで出来ればと思います。
- 締切済み
- HTML
お礼
ご回答ありがとうございました。