問題タブ [browser-width]

ブラウザの統計に関するほとんどの統計は、画面の解像度を示しています。

ブラウザが通常フルスクリーンで開き、ほとんどの人がそのままにしている Windows では問題ありません。したがって、ブラウザの統計で 1024x768 と表示されている場合は、ブラウザのクロムの幅を少し引くだけで済みます。

ただし、Mac では通常、ブラウザーは全画面表示になりません。

マックのブラウザをそのまま開いたら、どのくらいの幅がありそうですか？

what-is-the-best-absolute-width-for-a-webpage で推奨されている 960 の幅を考えています。しかし、これがMacの幅と同じくらい良いかどうか疑問に思っていますか?

いずれにせよ、Apple が最後に 1280x768 のラップトップやスクリーンをいつ製造したかはわからないので、おそらく問題にはなりません。画面解像度に関する統計を見つけたほとんどの場所で、実際に使用可能な幅が表示されないことに少しイライラしています。

まず、ありますか？または、JavaScriptを使用する必要がありますか？どの CSS が使用されているかを変更できるようにしたいので、モバイル デバイス用の小さいフォントなどを読み込むことができます。

私は周りを見回しましたが、私が探しているものがまだかなり見つかりませんでした。そのため、この質問が他の場所でまだ回答されていないことを願っています。

とにかく、問題のレイアウトはここにあります。私が達成しようとしているのは、固定幅の左の列と流体幅のコンテンツ領域です。ほとんどの場合、問題なく動作します。ただし、コンテンツがブラウザウィンドウの高さまたは幅を超えて拡張されると、セクションが希望どおりに拡張されないように見えます。上部の灰色のバーがページコンテンツの右側に到達せず、左側の列の高さもページコンテンツの下部に到達しないことに注意してください。

これは、CSSを介して高さを100％または幅を100％に設定することが静的であるという事実に起因すると私は考えていますか？つまり、CSSが呼び出されたときのブラウザウィンドウの高さ/幅が何であれ、保存されます。

その場合は、要素の高さと幅を設定する他の方法を調べる必要があるかもしれません。何か案は？また、ページ内のダミーコンテンツは今のところ画像であることに注意してください。データを非公開にするために、名前などをぼかしたいと思いました。

あなたの助けのすべてに感謝します!!!

現在、開発中のサイトのナビゲーション システムとして機能している長い画像があります。ここで見ることができます。このナビゲーション システムは最終的に小さなセクションに分割されますが、現在見ているのと同じ問題が発生する可能性があると思います。

画像の幅は 1920px で、ユーザーのブラウザー ウィンドウの幅 (最大 1920px) に関係なく、ナビゲーション画像 (分岐) は常に画面からはみ出します。ナビゲーション システムの中央にあるリーフは、上のロゴと一致するように常にページの中央に配置する必要があります。

現在、ナビゲーション DIV には次の CSS があります。

本文の最小幅は 900px です。

このセットアップには 2 つの問題があります。

1. ページにアクセスするとわかるように、ブラウザ ウィンドウの幅が 100% に設定されるようにするには、ナビゲーション システムの長い画像の右端によってブラウザ ページの幅が設定されています。ブラウザ ウィンドウの幅が 900px 未満の場合は 900px を超え、(水平スクロール バーを使用して) 900px まで。

2. ナビゲーション システムは本文の最小幅を考慮していません。つまり、ブラウザ ウィンドウの幅が 900px 未満の場合でも左に移動し続けますが、ページ コンテンツの残りの部分はそうではありません。

誰かがこれらの問題を手伝ってくれますか?

ありがとう、

ニック

すべての製品の画像がブラウザのウィンドウ サイズに合わせてサイズ変更されるサイトを作成しているので、1 つの大きな画像を使用して別のウィンドウ サイズでサイズ変更するメディア クエリを作成しましたが、使用した画像が 1 つあります。背景、どうすればサイズを変更できますか? IE7 と 8 でもすべてのブラウザでサポートしてほしい。

HTML

CSS

私のライブコードはこちらです:- http://jsfiddle.net/jamna/DdxbQ/19/ここにメインの「製品画像」があり、ブラウザウィンドウのサイズに応じてサイズが変更されています(私のフィドルではコードを書きませんでした)製品画像のサイズを変更していますが、現在サイズを変更したい画像のみを表示しています)しかし、製品画像と同時にサイズを変更したい「スパン」の背景にある別の「節約ラベル」画像があります。

jQuery を使用して、ブラウザーの幅と高さを取得し、2 つの異なる DIV を 2 つの異なる位置に追加しようとしています。

DIV ONE はブラウザー ウィンドウの左から 40 ピクセル、下から 40 ピクセル、DIV TWO は右から 40 ピクセル、下から 40 ピクセルの絶対位置に配置する必要があります。 、iPhoneなど）。

また、両方の div 内にコンテンツ (画像、子 div、およびテキスト) がありますが、jQuery では役に立たないため、これにアプローチする方法がわかりません。

誰でもこれで私を助けてくれますか?

平易な英語では、これは私が求めているjQuery機能です。

ブラウザウィンドウの幅と高さを取得してから、.bannerdivの高さを取得する必要があります（高さは自動です）。divの高.bannerさがブラウザウィンドウの高さよりも高い場合は、.titledivと.socialdivを本文に追加します。それ以外の場合は、.titledivと.socialdivをdiv内に表示します.banner。

次に、それに応じて2つのdivのスタイルを設定するにはどうすればよいですか（.titleおよび.social）。

編集： これはHTMLのページロードコードです：

だから私はメディアクエリとこのコードを実行しています:

しかし、これらが私のメディア クエリと一致していないようです。特定のモバイルと組み合わせると、これらの幅が気に入らないということは、スタイルが JS で追加されたスタイルと常に一致するとは限らないことを意味します。

JavaScript または jQuery を使用してブラウザの幅を検出する完全な方法はありますか?

私はうまく機能するこのjqueryコードを持っています:

上記を常にすべてのブラウザ/デバイスで表示して読み取る必要がありますが、小さいヘッダーの高さを調整する必要もあります (現在 90px - 行の下 // 固定 div を小さいサイズにアニメーション化:) ブラウザの幅のみ641px から 959px の間。これらのブラウザの幅に対してのみ、ヘッダーの高さを 120px にする必要があります。それ以外の場合は、上記のコードを使用します。

ブラウザのサイズが変更されたときにそれ自体を更新したいメディアクエリに少し似ています。

これを正確に行うにはどうすればよいですか？

このサイトでの位置を維持するために背景画像を設定する方法を考えています: http://www.jylkkari.fi/wordpress/

ブラウザを幅 960 ピクセル以下にドラッグすると、サイドバーの背景が中央に向かって移動し始めます。

この問題を解決できるJavascriptを見つけました。

ブラウザの幅が 960 px を超えている間、CSS で画像を中央に維持する簡単な方法があり、このサイズ未満の場合は固定されているかどうかをまだ検索していますか?