モバイルプラットフォーム開発に必要な記録（続き）_html/css_WEB-ITnose

今週も、インストラクターは私にモバイル端末プラットフォームの開発について詳しく教えてくれました。その宿題では、すべての Android デバイスと iPhone 4、4s、5 に適応する必要がありました。モバイル端末のフロントエンドについてはあまり詳しくないので、まずは情報を探すことから始めます。

1. モバイル端末情報

最近のモバイル Web ページ プロジェクトのさまざまな経験を共有します (ここでは写真の表示についての理解が深まりました)。

デバイスのピクセル比 devicePixelRatio について簡単に紹介します (ここでデバイスのピクセル比について予備的な理解を与えます)。

Hodgepodge http://mobile.smashingmagazine.com/tag/css/ (スマッシングマガジンもそれを知っています)。

2. 作業を開始します

HTML と CSS を記述するためのベンチマークとして 480 を使用し、フォントのベンチマーク サイズは 20px です。枠線以外の数値単位はemを使用し、デザイン案に基づいてベースフォントで数値を割ります。ディップが 1.5 を超えるデバイスの場合は、2 倍の大きさの背景画像を準備します。

ディップが 1.5 を超えるデバイス画像を処理する場合、コードは次のとおりです:

@media のみ screen と (min-device-width:541px) と (max-device-width:800px)、only screen と (min -width: 541px) と (max-width:800px)、画面のみと (-webkit-min-device-pixel-ratio : 1.5)、画面のみと (min-device-pixel-ratio :1.5){

/ / は、実際の解像度が 541px から 800px のデバイス、またはディップが 1.5 を超えるデバイス用に書かれたデバイス CSS です

}

他のサイズの画面設定に対応するフォント サイズ:

/* 幅 1080 ピクセルの画面用 */
@media のみ画面と ( @media のみ画面と (min-width:720px) と (max-width:800px){
body{font-size:33px}
}
/* 幅 720 ピクセルの画面用 */
@メディアのみの画面と (min-width:641px) と (max-width:720px) {
body{font-size:30px}
}
/* 幅 640 ピクセルの画面用 */
@media のみの画面と (max- device-width:640px),only screen and (max-width:640px){
body{font-size:27px}
}
/* 幅 540 px の画面用 */
@media のみ screen and (max-device- width:540px),only screen and (max-width:540px){
body{ font-size:22.5px}
}
/* 幅480ピクセルの画面用 */
@media のみ screen and (max-device-width :480px),only screen and (max-width:480px){
body{font -size:20px}
}
/* 幅 320 px の画面用 */
@media のみ screen and (max-device-width:320px) ),only screen and (max-width:320px){
body{font-size :13.5px}
}



3. Test

テストできるウェブサイトをいくつか共有します（ただし、どのテストウェブサイトもそれほど良いわけではありません）実機としてご覧ください)。

http://mattkersley.com /owned/

http://www.responsinator.com/?url=http%3A%2F%2F127.0.0.1% 2Findex.html

モバイルブラウザではサポートされていない可能性のあるいくつかの CSS プロパティに注意してください。場合によっては、上記の iscroll.js を使用してシミュレートする必要があります。