iPhoneのウェブサイトのバージョンは、pxまたは％で作業することをおすすめしますか？

Question

ユーザーが自分の携帯電話を90°なっている場合、正しく-evenウェブサイトを閲覧することができるようにするために、

を私はまだiPhone版を行っていないので、私はこの質問を持っている：

を

CSSをpxまたは％で設定しますか？

Answer 1

：あなたはまた、二つのクラス、肖像画のための1、景観のための1つでピクセルを使用することができます

そのようなデバイスをターゲットにしておらず、全員（ほとんどのスマートフォン）にワンストップのモバイルウェブサイトが必要な場合は、パーセンテージの使用を検討します。

あなたのメディアクエリではmin-width max-width and min-device-width and max-device-widthを指定することができます。

ここでは、メディアクエリとその組み合わせについてもう少し詳しく説明します。

/* Target iPhone Portrait */ 
@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} } 

/* Target Android Portrait larger than 320px Width */ 
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} } 

/* Target iPhone Landscape */ 
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} } 

/* Target Android Landscape */ 
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} } 

Answer 2

個人的に私はあなたがページが今までの方法これを回転させて100％になることをお勧めします

...というよりも、ピクセル、％を使用し、その後、周りに応じてコンテンツをシフトします。

ニューヨークタイムズは％が使用されています。ページが横になっている場所を見ると縦長で表示されます。

Answer 3

％を1つのCSSクラスで使用すると、コンポーネントのサイズが自動的に調整されます。あなたがプログラム的に、私はパーセンテージではなくピクセルを使用することになり、このようなiPhone &のiTouchなどのiOSデバイスをターゲットにしている場合は、

body[orient="portrait"] { 
property: value; 
} 
body[orient="landscape"] { 
property: value; 
} 

Answer 4

あなたはザビエルにより示唆されるように、私はCSSメディアクエリを使用することをお勧めし（iphone.mywebsite.comのようなサブドメーヌ）iPhoneのために不特定のウェブサイトを構築している場合。 min-widthとmax-widthを指定するよりもはるかに多くのことを行うことができます。

あなたは、デバイスの種類を指定することができます（ただし、多くのデバイスは、彼らが必要のように...認識されません）のような：screenhandheldprinttvと 他の多くでも、ブラウザウィンドウがportaitかlandscapeである場合に最も重要なのは、あなたが設定することもでき、それはresolutionまたはaspect-ratioだというように...

%またはピクセルに関しては、私は間違いなく、ピクセルのために行くだろう、それはあなたが％を使用したいと同じように働いて何かを持っていることは非常に困難です。ユーザーにiPhoneが付いている場合や他のデバイスが付属している場合は、必ずしも同じ種類の情報を必要としないためです。 例えば、iPhoneユーザーのためにあなたのウェブサイトからすべての重い画像を取り出すことができます。なぜなら、おそらく3G接続を使用しているため、サイトの読み込み速度が非常に速くなるからです。

AあなたはCSSメディアクエリで何ができるかの本当にnice example ...残念ながらit0sない私の仕事... :-(