「amazon」のようにユーザーのモニタ解像度を自動認識し、ユーザーごとにフルスクリーンにて表示させる技術についてお伺いします。
Aさんのモニタ解像度 1280px×800px
Bさんのモニタ解像度 1024px×768px
アクセス→AさんもBさんも切れたり余白ができることなく同じようなページに見える
自動取得後にページを振り分けるにはJavaScriptが有効なところまでは調べましたが、
「amazon」や「7ショッピング」等も同様の技術を使っているのでしょうか?
ページ振り分けであるとすれば、
全く別のコーディングが必要なページになりますが(ナビやバー、画像サイズ等の問題で)、
「amazon」や「7ショッピング」等もこの方法でサイトを作成しているのでしょうか?
もしこれより効率がよい方法がございましたらお教えいただけますでしょうか?
よろしくお願いいたします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
モニタの解像度に合わせるのと、ページの振分をするのはまた違う問題です。
JavaScriptを使ってウインドウのサイズを取得することが出来ます。画面の解像度ではなく、ウインドウ内部のサイズです。
これはブラウザによって使えるコマンドが違ったりしますので調節が必要です。
http://www.openspc2.org/reibun/javascript/window …
(IEでは取得できない注釈あり)
JavaScriptで基本となるウインドウのサイズが判れば、あとは画面内のオブジェクトに対してサイズの調節をスクリプトで行います。
様々なサイズのウインドウに合わせて振分ができないのは、あまりにも多様なためです。計算で調整します。
振分が必要なのはブラウザによって使える機能が違う場合ですね。
ことにJavaScriptは、ブラウザによって使えるコマンドも一部違いがあります。
また、表示の問題で同じタグを使っても同じように表示されない場合もあって、これがデザインに大きな影響を与える場合に振分て、別ページとしてデザインします。
CSSを使うとデザインもかなり微調整できますし、JavaScriptでCSSを切り換えることも可能です。もちろん、CSSの設定そのものをコントロールできます。
ただ、ページを完全に切り換えるような振分はCGIで処理することが多いのではないでしょうか。
No.2
- 回答日時:
「amazon」や「7ショッピング」程度の横幅の調整にはJavaScriptなんて必要ありません。
cssだけで十分です。
カラムの幅を固定幅で指定するのではなくて%で指定して構成すれば良いのです。
http://www.google.com/search?hl=ja&safe=off&q=CS …
No.3
- 回答日時:
既に回答が出ていますが、ページの振り分けは必要ないのではないでしょうか?
amazonの場合は左右のコンテンツは固定幅で真ん中だけ可変のようですね。これはcssで実装します。
また、中央のコンテンツは横幅によって商品の数が変わりますが、こういうのはjavascriptで実装します。単に中央を可変にするだけでは大きなモニタで見たときに中央の空間がスカスカになるので、amazonのこういう配慮は嬉しいですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) bingチャットの内容(縦長)をスクリーンショットで保存する方法 3 2023/02/28 02:13
- ハッキング・フィッシング詐欺 またきたフィッシング詐欺 8 2023/05/23 00:23
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- デジタルカメラ 録画した4K動画を、フルピクセルで再生したい 5 2023/05/10 00:05
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- オープンソース AWSドメイン名でApacheテスト・ページを表示させる方法を教えて下さい。 1 2023/04/26 15:59
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
- C言語・C++・C# プログラミングの問題です。至急教えてください。 /***から***/の部分をプログラミングにしてほし 1 2022/10/13 11:48
- その他(教育・科学・学問) 技術のテストの問題です。やり方を教えてください! 間1.7バイトは何ビットか。 間2.5ビットで表現 4 2023/02/27 00:09
- モニター・ディスプレイ 外部ディスプレイとの解像度の差について 3 2022/05/29 10:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
HTML電卓で1文字消す方法
-
<!DOCTYPE html>あってますか?↑
-
テーブルの行を折りたたみたい...
-
Duolingo のソースコードの名前...
-
HTML入門でもう躓いてしまった。
-
HTMLで画像をポップアップで表...
-
初心者html・CSS ウィンドウを...
-
スマホで、左右にスワイプして...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
HTMLです すいません教えてくだ...
-
フロントエンジニアで一人前と...
-
HTMLで特定の文字だけ色を変え...
-
WEBページを強制的に横画面で見...
-
、URL化させるにはどうしたらい...
-
CSSについて教えてください。 ...
-
CSS、Bootstrapについて contai...
-
コードを書いて下さい( ; ; )...
-
htmlで<form>~</form>を並べて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルのセルデータを自動改...
-
goo は、放置?
-
htmlソース文の 各行 改行位置...
-
1つの「ホームページビルダー2...
-
HPレイアウトが同じページのヘ...
-
CSS、Bootstrapについて contai...
-
CSSについて教えてください。 ...
-
静止画画像をクリックすると音...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
Webページのリンクの貼り方を教...
-
Duolingo のソースコードの名前...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
コードを書いて下さい( ; ; )...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
おすすめ情報