モバイル Web 開発入門ノート_html/css_WEB-ITnose

モバイル Web 開発は基本的に 3 つのタイプに分けられます:

• モバイル Web 開発

従来のページ開発については、モバイル Web 開発を参照してください。 Tencent.com に電話します。

• モバイル Web アプリ開発

簡単に言うと、開発中にブラウザーのプライベート メソッドを使用して、Web ページにいくつかのネイティブ機能を持たせることです。

• ハイブリッド アプリ開発 (ここでは説明しません)

簡単に言うと、React と同様の特定のコードを記述してクロスプラットフォーム Web アプリを生成することです。フォンギャップ、cocos2dなど。

私はモバイル開発に深く関わったことがないので、モバイル開発で遭遇するいくつかの問題も予測できます:

• CSS と JS のクロスプラットフォームの問題
• h5 と多くの新機能の使用
• レスポンシブ レイアウトと画面解像度の問題
• ネイティブ インタラクションの使用
• デバッグ方法
• パフォーマンスの最適化
• ちょっと待ってください

現在のモバイルデバイス市場は主に android、ios、windows の 3 つの主要なプラットフォームを考慮しています。中国にお住まいの場合は、マシンに QQ や UC などのブラウザがインストールされている可能性があるため、この点に関するサポートも考慮する必要があることに注意してください。ここで作業を始めるときは、Webkit カーネルを考慮してください。

次に、最初の 2 つの開発モードでは、モバイル ブラウザーのビューポートの概念を理解する必要があります。

CSS ピクセルとデバイス ピクセル

デバイス ピクセル (screen.width/height、単位はデバイス ピクセル) は実際には物理ピクセルであり、画面の解像度の測定は実際にはデバイスのピクセル数です。 . CSS ピクセルは幅の抽象的な尺度です。

ブラウザのスケーリングの原理は、実際にはピクセルをストレッチすることによって実現されます。現在、画面全体に CSS ピクセル幅 128px の要素が表示されており、画面デバイスのピクセル幅が表示されていると仮定します。が 128px の場合、図に示すように、1 CSS ピクセルは実際には 1 デバイス ピクセルに等しくなります。

ここで、要素を元の 200% に拡大すると、1 CSS ピクセルは次のようになります。図に示すように、4 つのデバイス ピクセルに相当します (小さな赤い四角形は 1 つの CSS ピクセルに相当します):

デバイス ピクセルは基本的に開発には役に立たず、スケーリングは開発には何の意味もありません。 CSS は表示効果を非常にうまく処理しますが、この概念を理解すると、次の測定の多くは CSS ピクセルで行われます。

PC 上のビューポート

ビューポートの機能は、Web ページの最上位の高速要素 を制約するためにブラウザーのレイアウト実装で使用されます。

例として、流体レイアウトを使用する場合、要素に [width: 10%] 属性を設定すると、その幅が親要素の幅の 10% になることは誰もが知っています。

要素の場合、問題は 要素の幅です。前述の理論によれば、 要素の幅は、 要素の幅の 100% であることがわかります。 。しかし理論上、 の幅はビューポートの幅の 100% に等しく、ビューポートは実際にはブラウザ ウィンドウと同じです。

はい、そのように定義されています。抽象的に理解してください。ビューポートは HTML 構造ではないため、CSS で制御できません。

ブラウザのこの性質は、いくつかの影響を及ぼします。たとえば、ナビゲーション バーの幅が 100% に設定されている場合、ページが拡大されると、次の状態が表示されます:

このようにして、ビューポートが実際にはブラウザ ウィンドウであることがわかり、そのサイズは、ページがレンダリングされると、ズーム操作やその他の操作によって変更されません。 次に、 要素を使用してそれを測定します。DOM に詳しい人なら誰でも、documentElement が実際には 要素を参照していることを知っていますが、documentElement.clientWidth/Height はビューポートのサイズです。 HTML のサイズは関係ありません (CSS または HTML の 要素に width 属性を付加する可能性があり、 要素のサイズを測定する属性は document.documentElement.offsetWidth/Height です)。 。ここでの測定値は CSS ピクセル単位で測定されます。

モバイル ビューポート

PC モデルをコピーし、それを表示用にモバイルに移行することを想像してみましょう。次に、画面が 400 ピクセルのデバイスに、列幅 10 % の流動的なレイアウト ページが表示されると仮定します。狭いストリップに圧縮されるため、携帯電話では表示効果が失われます。したがって、モバイル側のビューポートは PC 側のビューポートよりも少し複雑になり、レイアウト ビューポートとビジュアル ビューポートに分かれます。

まず、George Cummins が stackoverflow で与えた概念の定義を見てみましょう:

レイアウト ビューポートが、サイズや形状が変わらない大きな画像であると想像してください。小さなフレームを通して大きな画像が見え、その小さなフレームが不透明な素材で囲まれています。大きな画像の一部を除くすべてのビュー フレームを通して見える大きな画像の部分がビジュアル ビューポートです。フレームを押したまま (ズームアウトして) 大きな画像から離れると、画像全体が表示されます。または、近くに移動して (ズームインして) 一部だけを表示することもできます。フレームの方向を変更することもできますが、大きな画像 (レイアウト ビューポート) のサイズと形状は変わりません。

説明すると、ビジュアル ビューポートは現在画面に表示されているページの一部であり、ユーザーはスクロールすることで表示されるページの部分を変更したり、ズームすることでビジュアル ビューポートのサイズを変更したりできます。レイアウト ビューポートは、ページがレンダリングされた後の固定サイズの大きなフレームです。これは、PC 側でのサイズがブラウザーの特性によって決定されることがわかっています。ウィンドウ サイズですが、モバイル側の値です。たとえば、Safari の値は 980 ピクセル、Android WebKit の値は 800 ピクセルです。 2 つの写真と例を通してそれを感じてみましょう:

ズーム率が 100% の場合、レイアウト ビューポート = ビジュアル ビューポートであり、ユーザーがページをズームインすると、レイアウト ビューポート = ビジュアル ビューポートであることがわかります。画面上のページ部分が変更されたため、ビジュアルビューポートが変更されましたが、レイアウトビューポートのサイズは元のサイズのままです（ここではCSSピクセル単位で理解されます）

ビジュアルビューポートは測定されますby window.innerWidth/Height はい、もちろん単位も CSS ピクセルです。

メタビューポートタグ

このタグは、実際には次の文型を HTML ファイルに挿入するタグです。元々は Apple からのものです:

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

を確認できます。 MDN ドキュメントに記載されています。

その機能は、レイアウト ビューポートの幅を調整することです (その他、ドキュメントを参照)。ここでは、ppk マスターがモバイル端末上に理想ビューポートと呼ばれる別のビューポートが実際に存在すると考える理由を説明します。 。これは、ページ上の要素を最適に表示できる理想的なビューポート サイズです。上記のタグでは、名前が示すように、width=device-width によってレイアウト ビューポートの幅が画面の幅に設定されますが、ここにはいくつかの隠された秘密があります。たとえば、device-width を使用する場合、通常の幅になります。 Nexus One は 480 ピクセルですが、元の幅が大きすぎるため、Google エンジニアは 320 ピクセルの幅を返します。

ここで強調すべき点は次のとおりです:

1. [width=device-width] または [initial-scale=1] は、レイアウト ビューポートを理想的なビューポートのサイズに設定します

2. レイアウト ビューポートのサイズに関係なく、すべてのスケール指示は理想的なビューポートを基準とします。 [ズーム係数 = 理想的なビューポートの幅 / 視覚的なビューポートの幅]

3. 初期スケール コマンドは通常、次の処理を行います:

• ページの初期ズーム係数を設定し、視覚的なビューポートの幅を計算します。 viewport Size
• ページのレイアウト ビューポートのサイズを、計算されたばかりのビジュアル ビューポートのサイズに設定します。

4. 初期スケール ディレクティブが幅ディレクティブと競合する場合、ブラウザの動作

5. メタビューポートが設定されていない場合のページの表示方法

つまり、モバイル Web を開発する場合は、

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

タグを追加するだけです。ページへ。

次に、モバイル ページのレイアウト方法 (流動レイアウト、レスポンシブ レイアウト、REM) とモバイル Web ページのレイアウト方法を理解する必要があります。

• px

従来の PC ページ レイアウトでは、最も外側のコンテナが 980 ピクセルまたは 1080 ピクセルに設定されていることは誰もが知っています。実際、ブラウザのウィンドウを縮小すると、ビューポートの関係で、この固定サイズのページの表示もモバイル端末では非常に不親切です。

• % (流動レイアウト)

フロー レイアウトは実際にはパーセント幅 + 固定高であり、これが Baidu の現在の国内モバイル ページの機能です。ブラウザの幅が縮小するとコンテナも縮小するため、デバイスの画面が小さいほどエクスペリエンスが向上します。ただし、流動的なレイアウトにはまだ問題があります。たとえば、iPhone 6 と iPhone 4 の画面サイズは同じではありませんが、要素の幅はパーセンテージで表示されますが、テキストの行や境界線の半径が縮小されます。拡大するとpx単位での表示ができなくなり、横幅の比率が変わってしまうなどの問題があります。もちろん、一部の問題は、親要素の幅に対する相対的なパーセンテージであるパディングなどの CSS 属性を使用することで解決できます (また、画像が読み込まれるまで画像が読み込まれないときに画像の下の要素が再配置される問題も解決できます)レンダリングされます）が、テキスト、境界線の半径などは依然として比例して拡大縮小できません。

• レスポンシブ レイアウト
• Rem

1rem は html 要素の font-size 値と等しく、それに応じてフォント サイズ サイズを動的に設定します。画面サイズに合わせて。 rem はフォントなどの比例的なスケーリングを実現できます。 短所:

1. 对雪碧图不友好
2. 不够精准
3. PC端兼容不好
4. 本来16px的字显示已经够大，但由于使用了rem，在屏幕变大的同时，字体变大或导致翻页

其他

<meta name="apple-mobile-web-app-capable" content="yes">

苹果公司私有的meta标签，可以使web应用在全屏模式下运行，否则将用safari浏览器展示其内容

<meta name="format-detection" content="telephone=no">

默认情况下，Safari和IOS会自动识别像手机号码的文本，这个meta标签是用来禁止这项功能的

<link rel="apple-touch-icon" href="touch-icon-iphone.png"><link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"><link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"><link rel="apple-touch-startup-image" href="/startup.png"><a href="tel:1-408-555-5555">Call me</a>

当用户将web应用添加到主屏幕时，这时候IOS可以提供配置应用图标的功能和启动图片的功能。还有类似连接其他native应用的功能。 相似地，Google Chrome在安卓平台上也提供了类似的功能，不同的是android会自动识别邮箱地址，而ios是电话号码：

<meta name="mobile-web-app-capable" content="yes"><link rel="shortcut icon" sizes="196x196" href="icon-196x196.png"><meta name="format-detection" content="email=no">

(Todos)