2016-07-11 4 views
2

私のサイトには少なくとも720pxの幅が必要です。 Iphone 6は1334x750の解像度で表示されますが、ブラウザの解像度は667pxです。サムスンS5はおそらく1080x1920ですが、ブラウザは640を報告します。小さい画面をより大きな解像度に拡大縮小するよう強制しますか?

私は画面が詳細を処理することができますが、私はより大きな解像度を得る方法がわかりません。私は720pxを最小幅にする必要があるので、電話機を持つために何をすればいいですか?< 720pxが正しくスケールされますか?規模によって私はコード設計

@mediaだけ画面とを使用する前に、.cssのコード内の任意のスクロール

+1

正確に何を目指しているのかよくわからないが、これはいくつかの研究のための良い基礎を提供するかもしれない:https://www.sitepoint.com/media-queries-width-vs-device-width/とhttp:// www。 quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html – marsze

答えて

0

入力せずにこれをすべて720pxを表示する意味(最小幅:720px) と(最大幅:1336px)そして、(MIN-解像度

+0

また、*さまざまな画面サイズで*あなたのコードをテストしてください! *任意の画面と同じかそれ以上の大きさのアセットを埋め込む必要があるかもしれません。また、異なる次元の複数のアセットをバンドルする必要があるかもしれません。 "それは醜いことができる"だけでなく、 "予測不可能な。ディスプレイはポータブルデバイスの中で最も高価なコンポーネントの1つであり、「食料雑貨品店で売るにはより安価な電話機」を作る努力をしていたエンジニアによって多くの角が削られていました。 –

1

あなたは<meta name="viewport" content="width=device-width,initial-scale=1">

その後、ヘッドコードでこれを始めるあなたは、現在のすべてのデバイスをサポートしてシートをCSSにメディアクエリを追加する必要が http://codepen.io/mlegg10/pen/JKdOaj

+0

私は混乱しています。私は周りのグーグルで横方向をテストする方法を考え出しましたが、今は720pxの幅にロックする方法を理解できません。私はそれを検出する方法を知っていますが、私は2つの360pxの画像を持っており、私は両方の画面(実際のサイトのテスト)に並んでいる必要があります。 –

+0

テストページを作成してテストCSSページに追加しましたか? – mlegg

+0

私はやったと私は何が起こったのか分からない。それはクロムでメディアのクエリを表示していたのと同じように見えましたが、ページはまったく同じように見えます。私は、各デバイスのスタイルを入れたいと思っています。私は720pxの幅のページをこのデバイスの幅に合わせて縮尺を変える方法がわかりません –

1

私が正しく理解していれば、内容の幅をビューポートの幅に合わせて小さくしたいと思っています。このはあなたのコードでであれば

<meta name="viewport" content="width=device-width, initial-scale=1"> 

はそれを削除します。これは通常、コードはページのheadセクションに次の行が含まれていない限り、自動的に行われます。 (ただし、あなたのページは反応しないようにしてください。これは最近では珍しいことです)。

デバイスのピクセルに関する観察:このことは、より良い表示には重要な「ピクセル密度」と関係がある高解像度の画像がブラウザに供給されている場合は、画像(テキスト)(フォント)とベクターグラフィックス、および画像のシャープネスが必要です。たとえばiPhone 6の実際の高さは1334物理ピクセル(比率1:2)ですが、CSSピクセル単位では667pxと見なされます。

+0

私はそれを削除すると、980で修正されているようです。 –

+0

この行が削除されると自動的に縮小されます。 – Johannes

関連する問題