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タグの例を挙げてください。May 16, 2025 am 12:02 AM

HTMLタグと属性の使用方法には次のものが含まれます。1。基本的な使用法：などのタグを使用し、SRCやHREFなどの属性を介して必要な情報を追加します。 2。高度な使用法：データ - *カスタム属性を使用して、複雑な相互作用を実現します。 3.一般的な間違いを避けてください：プロパティ値が見積もりに囲まれていることを確認してください。 4。パフォーマンスの最適化：シンプルに保ち、標準属性とCSSクラス名を使用して、画像にALT属性があることを確認します。これらをマスターすると、Web開発スキルが向上します。

HTMLタグとHTML属性の違いは何ですか？May 14, 2025 am 12:01 AM

htmltagsdeTheStructureOfawebpage、whiLeattributesdddddddddtetails.1）tagslike、andoutlineThecontentのsplacement.2）属性、クラス、およびスチリーンハンシテアグビーズイメージソース、スタイリング、および改善、および改善の想像力。

HTMLの未来：進化とトレンドMay 13, 2025 am 12:01 AM

HTMLの未来は、よりセマンティック、機能的、モジュール式方向に発展します。 1）セマンティック化により、タグがコンテンツをより明確に説明し、SEOとバリアのないアクセスを改善します。 2）機能化は、ユーザーのニーズを満たすために新しい要素と属性を導入します。 3）モジュール性は、コンポーネントの開発をサポートし、コードの再利用性を改善します。

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

See all articles