Big Bear {{bb}} モバイル開発の旅 (シーズン 1)_html/css

Big Bear {{bb}} モバイル開発の旅 (シーズン 1)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:49:46

オリジナル

1199 人が閲覧しました

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). あまり練習せずにさまざまなレイアウトを体験してみる要するに、スペースは限られており、アイデアは無限です。

ははは、この記事は終わりましたが、これからも皆さんともっとコミュニケーションをとり、一緒に進歩していきたいと思います。。。。。。ふぅ…(*^__^*)