サイズ変更されたブラウザウィンドウは実際の使用例ですか？
bootstrap 3を使用するサイトのスタイリングに取り組んでいます。フロントエンドは私の強力なスーツではなく、私の役割は小さな問題を片付けることです。
私は全幅でデスクトップ上で作品を開発しています。 bootstrapの事前定義されたビューポートを使用しており、レスポンシブデザインの作成に使用しています。次に、モバイルのパフォーマンスを確認し、そこから進みます。その後、タブレットのレイアウトを確認しますが、通常は問題ありません。私の方法はおそらくベストプラクティスではありませんが、これまでのところ機能しています。
マーケティングクライアントに作業結果を表示すると、デスクトップで使用しているブラウザーウィンドウのサイズを変更して、さまざまなレイアウトを「テスト」します。これを行うことにより、ページ要素はブラウザによって再シャッフルされ、任意のビューポート幅で奇妙な場所になる可能性があります。
状況は、モバイルモードでデバイスパラメーターを選択して、これらの壊れたレイアウトを再作成できないことです。これは、フルサイズのブラウザウィンドウでサイトを開き、マウスを使用して特定の任意の幅にサイズ変更することによってのみ実行できます。
マーケティングは、これはサイトが本当にレスポンシブではないことを意味していると考えており、任意のブラウザ幅、ピクセルごとにレイアウトがきれいに見えるようにサイトを開発する必要があります。ウィンドウのサイズ変更のテストは、現在の開発方法からの脱却になるでしょう。
サイトのエンドユーザーに関する限り、ブラウザウィンドウのサイズ変更は実際のシナリオですか？ブラウザウィンドウのサイズを変更した（モニターをいっぱいにしない）ため、またはデスクトップシステムの解像度がおかしいため、エンドユーザーの1人が壊れたレイアウトになりますか？または、事前定義された静的サイズに対してのみ開発する必要がありますか？
ユーザーは、サイトの使用中にウィンドウのサイズを変更することはほとんどありません。多くの場合、サイズ変更自体が問題を引き起こす可能性があります。これは、特にJavaScriptを使用して、ウィンドウのロード時にいくつかのサイズを計算および設定する場合に当てはまります。一部のフレームワークはその手法に依存しており、サイズ変更されたオンザフライウィンドウがかなり壊れているように見えます。テスト中は、サイズ変更後に常に更新を要求して、新しいページの読み込みをシミュレートできます。
ただし、ユーザーは膨大な数の画面幅を使用します。ページを任意のピクセル幅で見栄えよくする必要があります。
一般的な画面幅は多数あります。ここにデータがあります サイトから トップ20を追跡します。ユーザーの4分の1近くを依然として「その他」が占めています。
Res % 360x640 22.04 1366x768 12.1 1920x1080 7.5 375x667 4.88 720x1280 2.99 1440x900 2.94 768x1024 2.62 1280x800 2.46 1600x900 2.42 320x568 2.33 1024x768 2.08 414x736 1.98 1280x1024 1.92 320x534 1.87 1536x864 1.78 320x570 1.64 480x800 1.34 1280x720 1.26 1680x1050 1.14 412x732 1.14 Other 21.58- ユーザーは、最大化されたブラウザーウィンドウを使用できません。これは、ユーザーが使用する画面の一部をブラウザに割り当てている非常に広い画面で特に一般的です。
ブラウザーを最大化しても、スクロールバー、ウィンドウの境界、またはブラウザーのサイドバー（ブックマークや履歴など）があり、それらが幅の広いスペースを占有する場合があります。多くの場合、Webページには、操作するウィンドウの幅がすべてありません。多数のユーザーは、画面全体の幅よりも数十ピクセル小さいサイズになります。
データを収集したサイト 最大化されたユーザーのブラウザウィンドウがどれくらい近いかについては、通常：
full screen % Totally 0.85 Within 50px 1.06 Within 100px 9.67 Within 200px 61.18
膨大な数の画面サイズと、全画面幅を使用できない多数のユーザーの間では、Webサイトで任意のピクセル幅をサポートする必要があります。
動作させるための優れたレスポンシブテクニックがあります。
- ほとんどのサイトは、320px前後の最小サポート幅を選択します
- ほとんどのサイトでは、サポートされる最大幅（1200pxが一般的）を選択します。その後、サイトの周囲のマージンのみが拡大し、サイトはページの中央に配置されます。
- 最小値と最大値の間で、列が折りたたまれてスタックする1つまたは2つのブレークポイントが選択されます。
- 列内の要素は通常、列の幅全体に拡張できます。