1

高度なスケーラビリティ/レスポンシブが必要な tumblr テーマを構築しています。それはほとんど中央のグリッドに投稿されたものです。CSS メディア クエリを使用して、ブラウザー ウィンドウのサイズを追跡し、それに応じてグリッドのサイズを変更/中央揃えしています。現在、次のようになっています。

<link rel='stylesheet' media='screen and (max-width: 640px)' href='URL.css' />
<link rel='stylesheet' media='screen and (min-width: 640px) and (max-width: 959px)' href='URL.css' />
 <link rel='stylesheet' media='screen and (min-width: 960px) and (max-width: 1279px)' href='URL.css' />
 <link rel='stylesheet' media='screen and (min-width: 1280px) and (max-width: 1599px)' href='URL.css' />
 <link rel='stylesheet' media='screen and (min-width: 1600px) and (max-width: 1919px)' href='URL.css' />

幅 640px で最大になる最初のものは、firefox/chrome ウィンドウのサイズを小さく変更すると完全に機能しますが、モバイルではまったく機能しないようです。私の電話は Droid Razr Maxx で、「縦向き」の向きでもデフォルトで 960px の幅になっているようです。

スタイルをデフォルトでモバイルサイズのスタイルに設定しようとしましたが、同じ結果が得られました。これも他の理由で最適ではありません (Internet Explorer がその 1 つです)。

4

3 に答える 3

1

私は非常に頻繁にクエリを処理します。問題は、特に頭の中で何らかのズームを使用している場合に、モバイル ブラウザーで表示されるものが、デバイスの仕様で示される正確なピクセル数ではないことがあることです。私がやりたいことは、非常に単純な jquery アラートを使用してビューポート/ドキュメントのサイズをチェックし、作業しているサイズを正確に確認することです。http://responsejs.com/labs/dimensions/は、ビューポートの幅と高さをキャプチャするさまざまな方法を示す優れたサイトです。

また、「画面と ....」よりも「すべてと ....」を使用することを好みます。

これがまったく役立つことを願っています

于 2012-12-10T16:38:53.530 に答える