HTML5 モバイル Web サイトの開発プロセス

この記事では、主に HTML5 モバイル Web サイトの開発プロセスを紹介します。モバイル Web サイトを開発したい友人は参考にしてください。私は最近モバイル Web サイトの開発を勉強していますが、モバイル Web サイトの構築はそれほど簡単ではないことがわかりました。とても難しいです。なぜそんなことを言うのですか？考えてみましょう。従来の PC ウェブサイトも作成できますが、小規模なモバイル ウェブサイトも作成できないでしょうか?実際、モバイル ウェブサイトは PC ウェブサイトの縮小版にすぎません。なぜ難しいのかというと、どこから始めればよいのかわからないような気がします。

以下のような点があると思います:

1. 完全なアイデアやプロセスはない

ウェブサイトの制作過程と同じように、そのプロセスを知っていれば、難しいとは思わないと思います。携帯サイトを作るなら！本当に難しいのは、何も分からないということです。

第二に、HTML5 テクノロジーは不可解だと考えてください

モバイル Web サイトを構築するために HTML5+CSS3 を使用することを学ぶことは、一流の武道を学ぶことと同等であるようです。実はあなたは間違っています！実際、HTML5 についてはあまり深く考えないでください。実際、モバイル Web サイトを構築する場合、HTML5 の強力な機能はそれほど必要ありません。 (テクノロジーについてあまり詳しくない初心者向けかもしれません: あなたのモバイル Web サイトは HTML5+CSS3 で作られていますが、これは素晴らしいことです。インターネット上の最新かつ最先端のテクノロジーを使用できます。実際、目の肥えた人なら、それがどのようなテクノロジーで作られているかを知ることができます。「素人にも興奮がわかり、専門家には真実がわかる」という言葉があります。

さて、たくさん話しましたが、次は携帯サイトの作り方！

基本的にモバイルWebサイトの開発は大きく2つのカテゴリーに分けられます。 1 つはフレームワークを使用してモバイル Web サイトを開発することです。 1 つは手書きのモバイル Web サイトです。

1. モバイル Web サイト用のフレームワーク開発

一般的に使用される開発フレームワークは次のとおりです: 現在、Web フロントエンドで最も人気のあるフレームワーク (BootStrap)、Jquery モバイル... もちろん、いくつかのモバイル開発フレームワークもあるかもしれません。 、これらは詳しく調べていません。

BootStrap が現在最も人気のあるフロントエンド開発フレームワークであるのはなぜですか?

ブートストラップには応答性の高いレイアウト (グリッド システム) が付属しており、モバイル デバイス第一原則を実装できるためです。

Web サイトの開発にブートストラップを使用する利点は何ですか? 1. デザインがわからなくてもウェブサイトは作れます

デザインがわからなくても、Bootstrap を使えばウェブページの見栄えを良くすることができます。強力な内蔵スタイル ライブラリにより、作品が素晴らしい見栄えになります。

主に反映されるのは、フォント ファイルとブートストラップ独自の 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. ビューポートタグを追加します

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

詳細な属性:

width ---- ビューポートの幅 (width=device-width は、幅がデバイスの幅と等しいことを意味します)

height ---- -- ビューポートの高さ ( height=device-height は、高さがデバイスの幅に等しいことを意味します)

initial-scale ----- 初期スケーリング比

minimum-scale ----- ユーザーに許可される最小比率

最大スケールまでズームする - ---- ユーザーがズームできる最大比率

ユーザースケーラブル ----- ユーザーが手動でズームできるかどうか

关于viewport的详细原理和知识点，各位就百度吧！在这里我就不做详细的讲解了。

2、禁止将数字变为电话号码

b101097c78f8c91e38a82aee2f05e19b

一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！

3、iphone设备中的safari私有meta标签

286e37713e94d45d6513b09f6d0fa493

它表示：允许全屏模式浏览，隐藏浏览器导航栏

4、iphone的私有标签

6f3e86bef7a1624899c9cf77c76218d8

它指定的iphone中safari顶端的状态条的样式

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：

bc1fa90c231aa876444727cd477e94fa

不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。

手机网站基本框架代码：

XML/HTML Code复制内容到剪贴板

  
  
  
  
  
  
  
  
  
  
  
  
  
  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  
  
  
  
  
  
  
  
  
  
  
   
  
    
  
  
  
    
  
  
        大家好！我是段亮，这是我的第一个手机网页哦！   
  
    
  
  
  
  

下面是我做的基于微信二次开发的手机页面案例：

其实在移动端的开发让我纠结的是在字体单位上的选择。

随着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 モバイル Web サイトの開発プロセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。