ホームページ >ウェブフロントエンド >htmlチュートリアル >Big Bear {{bb}} モバイル開発の旅 (シーズン 1)_html/css_WEB-ITnose
Big Bear {{bb}} モバイル開発の旅 (シーズン 1)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:461227ブラウズ
1、オープニング概要
みなさん、こんにちは！ Big Bear 氏が再び登場します。この記事からモバイル開発についてお話したいと思います。このパートは合計 8 シーズンあり、モバイル開発とは何かをさまざまな角度から説明します。モバイル開発にはどのような技術的側面が関係するのか、またモバイル開発における一般的な問題や複雑さについて説明します。
モバイル開発とは、実際には Web テクノロジーの使用を意味します。これには、主に「h5、css3、javascript」およびその他のテクノロジーが含まれます。関連する完全なセット (エコシステムにはツール、フォーラム、開発者が含まれます) を使用して、HTML5 API とネイティブ API を使用して実際のモバイル アプリケーションを開発できます。
クロスプラットフォームと移植性において比類のない利点があります。背景理解: 以下は、純粋な Web (HTML5)、ハイブリッド アプリ (ハイブリッド)、ネイティブ アプリ (ネイティブ) の 3 つのモバイル開発ルートの違いを詳細に比較するインフォグラフィックです。
いくつかの主な違い:
開発の難易度 モバイル Web およびハイブリッド アプリの開発は Web 開発者にとって比較的難しく、既存の Web 開発ツールとワークフローを最大限に活用できます
リリース チャネルと更新方法------ハイブリッド アプリは App Store でリリースできますが、個別に更新できますが、ネイティブ アプリへの更新は App Store アプリを通じてアクセスする必要があります モバイル デバイスのローカル API アクセス-----ハイブリッド アプリモバイル デバイスのカメラと GPS は JavaScript API を通じてアクセスされ、ネイティブ アプリはネイティブ プログラミング言語を通じてデバイスのすべての機能にアクセスできます。
クロスプラットフォームと移植性--ブラウザベースのモバイル Web は、最高の移植性とクロスプラットフォームのパフォーマンスを備えています。ハイブリッド アプリは、クロスプラットフォームの時間とコストも節約でき、コア コードを一度記述するだけで済みます。複数のプラットフォームに展開でき、ネイティブ アプリのクロスプラットフォーム パフォーマンス
検索エンジン フレンドリー-----モバイル ウェブのみが検索エンジン フレンドリーで、オンライン マーケティングと組み合わせることができます
収益化----- --ハイブリッド アプリを除く 広告に加えて、有料ダウンロードとアプリ内購入もサポートしており、2012 年に初めてネイティブ アプリのアプリ内購入金額が
を超えました。 メッセージ プッシュ -------ハイブリッドのみアプリとネイティブ アプリはメッセージ プッシュをサポートしているため、ユーザーのロイヤリティを高めることができます。
次に、モバイル開発の話題に入りましょう
Web テクノロジーに基づくモバイル アプリケーション開発に関する限り、本質は同じであり、PC 側の開発と非常によく似ているため、スープを変更します。どのような種類であっても、薬は変わりません。 アプリケーションには、フレンドリーなインターフェイスの操作性が必要です。 1 つ目は、モバイル レイアウトと従来の PC ベースの
ブラウザ レイアウトの間にはまだ違いがあるため、今日から始めます。レイアウトを変えて、浅いところから深いところまで徐々に改善していきます。さて、肝心な部分に入りましょう。まず、次のように小さなクリを見てみましょう:
これを行うには、次の 3 つのステップに分けます:
(1)、仮想デバイスをテストする準備をします。ここで使用するのは、Chrome に付属しているガジェットです
(2) "bb.html"bb.html などの HTML ページを作成します
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 6 <meta content="yes"name="apple-mobile-web-app-capable"/> 7 <meta content="black"name="apple-mobile-web-app-status-bar-style"/> 8 <meta name="format-detection"content="telphone=no"/> 9 <title>大熊君移动开发之旅</title>10 <link rel="stylesheet" href="bb.css" media="all">11 </head>12 <body>13 <header class="header">大熊君移动开发之旅</header>14 15 <div class="wrap-page">16 <div class="page">17 <p>哈哈哈，我是大熊君{{bb}} (●'?'●))18 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 19 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 20 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 21 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 22 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 23 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 24 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 25 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 26 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 27 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 28 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 29 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 30 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 31 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 32 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 33 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 34 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 35 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 36 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 37 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 38 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 39 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 40 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 41 </div> 42 </div> 43 <footer class="footer">如果大家喜欢，推荐哦~~~</footer> 44 </body> 45 </html>
CSSコードは以下の通りです:
1 .header,.footer,.wrap-page{ 2 position:absolute; 3 left:0; 4 right:0; 5 color:#f8f8f8; 6 } 7 .header,.footer{ 8 height:44px; 9 background-color: #fff;10 text-align: center;11 z-index:900;12 line-height:44px;13 background:#C10066;14 }15 .header{16 top: 0;17 border-bottom: 1px solid #f00;18 }19 .footer{20 bottom: 0;21 border-top: 1px solid #f00;22 }23 .wrap-page{24 top: 44px;25 bottom: 44px;26 overflow-y:auto;27 -webkit-overflow-scrolling:touch;28 color:#333;29 }30 .page{31 padding: 10px;32 }33 .page p{34 margin-bottom: 10px;35 }
実際の効果は以下の通りです:
Three、analyze
1、りー 2、
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />// 上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏与导航栏（ios7.1新增）。
3、
width ? viewport的宽度height ? viewport的高度initial-scale ? 初始的缩放比例minimum-scale ? 允许用户缩放到的最小比例maximum-scale ? 允许用户缩放到的最大比例user-scalable ? 用户是否可以手动缩放
要約すると、多くのモバイルレイアウトは、Css3 が提供する属性サポートを使用しており、互換性がない場合やパフォーマンスが低い場合は、js で処理する必要があります。 1------幅、高さ、フォントサイズに関係なく、パーセント法を使用します。
2-----相対レイアウト方式を使用します。 3-----モバイルアプリケーションの一部のプリセット処理にメタタグを設定します。
(4)、最終まとめ
(1)、合理的なレイアウトにはパーセント法を使用します。
(2)、相対レイアウト方式を使用します。
(3). あまり練習せずにさまざまなレイアウトを体験してみる 要するに、スペースは限られており、アイデアは無限です。
ははは、この記事は終わりましたが、これからも皆さんともっとコミュニケーションをとり、一緒に進歩していきたいと思います。 。 。 。 。 。ふぅ…(*^__^*)