ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 モバイル Web サイト開発プロセス_html5 チュートリアルのスキル
HTML5 モバイル Web サイト開発プロセス_html5 チュートリアルのスキル
- PHP中文网オリジナル
- 2016-05-16 15:45:282706ブラウズ
私は最近、モバイル Web サイトの開発について勉強していますが、モバイル Web サイトの作成は想像しているほど難しくないことがわかりました。なぜそんなことを言うのですか？考えてみましょう。従来の PC ウェブサイトも作成できますが、小規模なモバイル ウェブサイトも作成できないでしょうか?実際、モバイル ウェブサイトは PC ウェブサイトの縮小版にすぎません。なぜ難しいのかというと、どこから始めればよいのかわからないような気がします。
次のような点があると思います。
1. 完全なアイデアやプロセスはありません
Web サイトの作成プロセスと同じように、この手順を理解できれば、モバイル Web サイトを構築するのは難しくないと思います。本当に難しいのは、何も分からないということです。
2. html5 の技術は不可解だと考える
モバイル Web サイトを構築するために html5 css3 を使用することを学ぶことは、一流の武道を学ぶことと同等であるようです。実はあなたは間違っています！実際、HTML5 についてはあまり深く考えないでください。実際、モバイル Web サイトを構築する場合、HTML5 の強力な機能はそれほど必要ありません。 (テクノロジーにあまり詳しくない初心者向けかもしれません: あなたのモバイル Web サイトは HTML5 CSS3 で作られています。これは素晴らしいことです。インターネット上の最新かつ最先端のテクノロジーを使用できます。実際、目の肥えた人なら誰でも一目でそれがわかります。どのようなテクノロジーが使用されているか? 「素人には興奮がわかりますが、専門家には真実がわかります」という言葉があります。
さて、たくさん話しましたが、モバイル Web サイトの開発方法について話しましょう。
基本的にモバイル Web サイトの開発は、大きく 2 つのカテゴリに分類できます。 1 つはフレームワークを使用してモバイル Web サイトを開発することです。 1 つは手書きのモバイル Web サイトです。
1. モバイル Web サイト用のフレームワーク開発
一般的に使用される開発フレームワークは次のとおりです。現在、Web フロントエンド (BootStrap) で最も人気のあるフレームワーク、Jquery mobile..もちろん可能ですが、詳しくは調べていないモバイル開発フレームワークもいくつかあります。
BootStrap が現在最も人気のあるフロントエンド開発フレームワークであるのはなぜですか?
ブートストラップには応答性の高いレイアウト (グリッド システム) が付属しており、モバイル デバイス第一原則を実装できるためです。
ブートストラップを使用して Web サイトを開発する利点は何ですか?
1. デザインがわからなくてもホームページは作れます
デザインがわからなくても、見栄えの良いホームページは作れますブートストラップの助けを借りて。強力な内蔵スタイル ライブラリにより、作品が素晴らしい見栄えになります。
主に、フォント ファイルとブートストラップ独自の UI スタイルに反映されます。 (UI の設計方法がわからないプログラマに朗報です)
2. すぐに始められます
面倒な詳細は Bootstrap に任せて問題解決に集中できます。について。一度開発すればすべての端末に適応できるため、すぐに開始して Web サイトのプロトタイプを構築できます。また、豊富なプラグインも豊富に用意されており、JS を知らなくても、基本的に一般的な API を理解し、Web サイト上の影響を解決できます。
欠点:
1. ベスト プラクティスに従っていない
Bootstrap を使用するときに遭遇した最大の問題の 1 つは、DOM 要素が多数のクラスで混雑することです。 。これは、優れた Web デザインの基本ルールの 1 つを破り、HTML にはセマンティクスがなくなり、コンテンツとプレゼンテーションが分離されなくなります。フロントエンドの純粋主義者はこれをかなり煩わしく感じ、スケーラビリティ、再利用性、メンテナンスがより困難になると主張するでしょう。
2. Bootstrap が重すぎる
直接的に言うと、CSS と JS が少し重いです。 CSS は圧縮後 115k、JS は圧縮後 35k です
Bootstrap のすべての機能を使用したい場合は、リソースの読み込み時間を慎重に考慮する必要があります。もちろん、場所によってはこれが問題にならない場合もありますが、ニュージーランドではインターネットは太平洋を越える必要があり、データが到着するまでに時間がかかります。したがって、ターゲット市場を考慮してください。
私は、どのフレームワークにも長所と短所があると信じています。完璧な製品はありませんので、実際の状況に基づいて選択してください。他のフレームワークについては、現時点ではあまり説明しませんが、Baidu を使用する意欲があれば、望む答えが見つかると思います。
モバイル開発プロセス
2. 手書きのモバイル Web サイト
一般的に、モバイル Web サイトを自分で手動で開発する場合、基本的に次のように分けることができます。 2つのカテゴリーが到着します。 1 つのタイプは、Web ページのヘッダーにメタ タグを追加することで実現されます (Web ページは HTML5 形式で開発されます)。もう 1 つのタイプは、CSS3 の Media タグ (メディア クエリ) を通じて実装されます。メディア クエリについて詳しくない友人は、この記事「レスポンシブ レイアウト」を読んでください。
ここでは、メタタグを使用してモバイル Web サイトを構築する方法を詳しく説明します。
基本的に、モバイル Web サイトのフレームワークを実装するには、Web ページの先頭に 4 つのメタ タグを追加するだけで済みます。メタタグを見てみましょう。
1. ビューポート タグを追加します
詳細な属性:
width ---- viewport的宽度（width=device-width意思是：宽度等于设备宽度） height ------ viewport的高度（height=device-height意思是：高度等于设备宽度） initial-scale ----- 初始的缩放比例 minimum-scale ----- 允许用户缩放到的最小比例 maximum-scale ----- 允许用户缩放到的最大比例 user-scalable ----- 用户是否可以手动缩放
ビューポートの詳細な原理と知識ポイントについては、Baidu を参照してください。 ！ここでは詳しく説明しません。
2. 番号を電話番号に変更することは禁止されています
通常の状況では、IOS および Android システムでは、デフォルトで一定の長さの番号が電話番号として使用されます。追加されていない場合はデフォルトで電話番号として表示されるので、これを解除する必要があります。
3. iPhone デバイスの safari プライベート メタ タグ
これは、全画面モードでの閲覧を許可し、ブラウザのナビゲーション バーを非表示にします
4 .iphone プライベート タグ
は、iPhone
の Safari の上部にあるステータス バーのスタイルを指定します。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：
不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。
手机网站基本框架代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手机网站</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="author" content="duanliang, duanliang920.com" />
<style>
body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
.viewport{ max-width:640px; min-width:300px; margin:0 auto;}
</style>
</head>
<body>
<div>
大家好！我是段亮，这是我的第一个手机网页哦！
</div>
</body>
</html>下面是我做的基于微信二次开发的手机页面案例：
其实在移动端的开发让我纠结的是在字体单位上的选择。
随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。
原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。
关于手机网站的调试问题
一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。
比如：（Android类手机，iPhone5、5s、6、6Plus...）
而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。
如下图：
手机测试效果图
或者用火狐的测试工具：按shift+ctrl+M进行查看。
写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。
以上就是HTML5移动端手机网站开发流程_html5教程技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！