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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:49 AM

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

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles