【オリジナル】iphone6が来るんだけどどうすればいいですか_html/css_WEB-ITnose

北京時間 2014 年 9 月 10 日午前 1 時、Apple は新世代製品 iPhone6 を正式にリリースしました。Web アプリ開発に取り組んでいる学生たちは、それに対する好奇心と期待でいっぱいであると同時に、不安でもあると思います。あらゆる種類のチート、高精細解像度、アップグレードされた Retina ディスプレイがもたらされますが、どのように適応させるべきでしょうか?

iPhone5 と比較して、iPhone6 はより高解像度の Retina HD ディスプレイを備えており、iPhone6 plus のピクセル密度は 406ppi に達し、元の 326ppi と比較して 25% 増加しました。比率はオリジナルの2.0から2.6に増加し（同じサイズの画面上のピクセル数が1から6.76に変化します）、表示画面の詳細がより豊かになります。

Retina ディスプレイ画面の原理については、以前「高解像度ディスプレイ画面の原理と設計計画」という記事を書きましたので、ぜひ読んでみてください。

iPhone6 plus の高精細解像度 (1920*1080) は人々を不安にさせますが、実際、Samsung の Galaxy S4 (解像度: 1920x1080、デバイスのピクセル比: 3.0) など、そのようなデバイスは以前から市場に出ていました。しかし、ユーザーの数はそれほど多くはありません。WebPP の開発も、コンテンツを正常に表示できるようにするために、960*640 の元の iPhone 4 のデザイン草案から始まりました。 iPhone6 plusの登場はそれをさらに後押ししており、ビジョンとフロントエンドにとって新たな挑戦であることは間違いありません。

では、iPhone 6 plus 1920*1080 ページ専用に別の調整セットを作成する必要があるのでしょうか?

まず、2014 年第 2 四半期の Tencent Cloud Analysis のモバイル業界データ レポートを見てみましょう。このデータは

15 億台以上のデバイスをカバーしており、参考として非常に価値があります。まず Android の画面解像度ランキングを理解してください。

はい、今後のトレンドは大画面携帯電話であることが分かりますが、大画面携帯電話の割合を差し引いた他のAndroid携帯電話の割合は

61.5%

ということになります。現在、画面の狭い携帯電話が大部分を占めていますが、ハイエンド ihpone マシンの割合を見てみましょう:

iPhone 4 は依然として最大のユーザー数を誇り、その価値は無視できません。携帯電話の大画面化がトレンドではありますが、現在のデータからは、最も多くのユーザーが使用するデバイスに合わせてビジュアル ドラフトを設計しています。 . 大画面の携帯電話は通常、上位互換性と下位互換性を備えており、ほとんどの問題を解決できます。

そして、すべての iOS および Android デバイスで適切に表示される一連のページをデザインする場合、表示効果が平均的であれば、iPhone6 に適応する必要はありません。大画面の携帯電話ではコンテンツが小さすぎる場合）、ページをさらに調整する必要があります。これは、私たちがよくレスポンシブ デザインと呼ぶものとして理解できます。 ここで、著者は互換性のために CSS メディア クエリを使用する方法を考え出しました。これは参考用です。何か問題がある場合は、iPhone 6 が入手可能になるまで待ってからテストする必要があります。記事は皆さんにフィードバックするために更新されます~

@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */.class{}}@media (device-width:414px) and (-webkit-min-device-pixel-ratio:2.6){/* 兼容iphone6 plus */.class{}}

この問題に適応するには、やはり、それを特定のプロジェクトと組み合わせ、上司の顔を見て、ユーザーの考えを確認する必要があります。開発の観点から、製品の品質と経験を確保するために事前に準備をしてください。上司が昇給します〜

iPhone4とiPhone5の互換性については、以前に「iPhone4と互換性を持たせる方法」という記事を書きました。とiPhone5」

参考資料:

iphone-6/スペック

retina HDディスプレイ

iPhone 6および6 Plusのビューポートデバイス幅を確認

iPhone 6および6 Plus Responsive Breakpoints