HTML5 モバイル Web サイトの開発プロセス-htmlチュートリアル-php.cn

この記事では、主に 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、禁止将数字变为电话号码

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

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

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

4、iphone的私有标签

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

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

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

不过腾讯对这个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调试工具：有个手机样的小图标，点击就能模拟手机测试。

如下图：