Entwicklungsprozess für mobile HTML5-Websites-HTML-Tutorial-php.cn

In diesem Artikel wird hauptsächlich der Entwicklungsprozess einer mobilen HTML5-Website vorgestellt. Freunde, die eine mobile Website entwickeln möchten, können sich darauf beziehen.

Ich habe mich kürzlich mit der Entwicklung mobiler Websites befasst und festgestellt, dass dies der Fall ist nicht so schwierig wie gedacht. Warum sagst du das? Denken wir darüber nach: Wir können sogar eine herkömmliche PC-Website erstellen, aber können wir nicht sogar eine kleine mobile Website erstellen? Tatsächlich ist eine mobile Website nur eine Miniaturversion einer PC-Website! Warum es mir schwerfällt und ich nicht weiß, wo ich anfangen soll.

Ich denke, es gibt die folgenden Punkte:

1. Es gibt keine vollständige Idee und keinen vollständigen Prozess

Genau wie der Prozess der Erstellung einer Website, Wenn Sie es wissen, wird es Ihnen meiner Meinung nach nicht schwer fallen, eine mobile Website zu erstellen! Was wirklich schwierig ist, ist, dass man keine Ahnung hat.

2. HTML5-Technologie als unergründlich betrachten

Es scheint, dass das Erlernen der Verwendung von HTML5+CSS3 zum Erstellen einer mobilen Website gleichbedeutend mit dem Erlernen der besten Kampfkünste ist. Eigentlich liegst du falsch! Denken Sie nicht zu tief über HTML5 nach. Tatsächlich benötigen Sie beim Erstellen einer mobilen Website nicht viele der leistungsstarken Funktionen von HTML5. (Vielleicht für einige Neulinge, die nicht viel über Technologie wissen: Ihre mobile Website wird mit HTML5+CSS3 erstellt, was großartig ist! Sie kann die neueste und modernste Technologie im Internet nutzen. Wenn Sie tatsächlich eine haben Mit einem anspruchsvollen Auge werden Sie sehen, aus welcher Technologie es besteht. Wie das Sprichwort sagt: „Ein Laie kann die Aufregung sehen, ein Experte kann die Wahrheit sagen“)

Okay, jetzt, wo ich viel geredet habe , lass uns darüber reden, wie man eine mobile Website entwickelt!

Grundsätzlich lässt sich die Entwicklung mobiler Websites grob in zwei Kategorien einteilen. Eine besteht darin, Frameworks zur Entwicklung mobiler Websites zu verwenden. Ein Typ ist eine von Ihnen selbst handgeschriebene mobile Website.

1. Framework-Entwicklung für mobile Websites

Allgemein verwendete Entwicklungs-Frameworks sind: Das derzeit beliebteste Framework für das Web-Frontend (BootStrap), JQuery Mobile. Natürlich ist es möglich. Es gibt auch einige mobile Entwicklungsframeworks, die ich nicht im Detail untersucht habe.

Warum ist BootStrap derzeit das beliebteste Front-End-Entwicklungsframework?

Weil Bootstrap über ein responsives Layout (Rastersystem) verfügt und das Prinzip „Mobile Device First“ umsetzen kann.

Welche Vorteile bietet die Verwendung von Bootstrap für die Entwicklung einer Website?

1. Sie können eine Website erstellen, auch wenn Sie sich mit Design nicht auskennen

Auch wenn Sie sich mit Design nicht auskennen, kann Ihre Webseite dennoch ein tolles Erscheinungsbild haben mit Hilfe von Bootstrap. Die leistungsstarke integrierte Stilbibliothek verleiht Ihrer Arbeit ein atemberaubendes Aussehen.

Hauptsächlich reflektiert in: Schriftartdateien und dem Bootstrap-eigenen UI-Stil. (Gute Nachrichten für Programmierer, die nicht wissen, wie man Benutzeroberflächen gestaltet)

2. Schnell loslegen

Sie können sich auf die Lösung von Problemen konzentrieren und die mühsamen Details Bootstrap überlassen . Es kann einmal entwickelt und an alle Endgeräte angepasst werden, und Sie können schnell loslegen und einen Website-Prototyp erstellen. Es bietet auch viele umfangreiche Plug-Ins. Auch wenn Sie JS nicht kennen, können Sie gängige APIs grundsätzlich verstehen und die Auswirkungen auf die Website lösen.

Nachteile:

1. Nichtbefolgen von Best Practices

Eines der größten Probleme, auf die wir bei der Verwendung von Bootstrap gestoßen sind, besteht darin, dass Ihre DOM-Elemente mit einer großen Anzahl von Klassen überfüllt sind . Damit wird gegen eine der Grundregeln guten Webdesigns verstoßen: HTML hat keine Semantik mehr und Inhalt und Darstellung sind nicht mehr getrennt. Front-End-Puristen werden dies eher nervig finden und argumentieren, dass dadurch Skalierbarkeit, Wiederverwendbarkeit und Wartung zu einer größeren Herausforderung werden.

2. Bootstrap ist zu schwer

Um es direkt auszudrücken: CSS und JS sind etwas schwer. CSS ist nach der Komprimierung 115 KB groß, JS ist nach der Komprimierung 35 KB.

Wenn Sie alle Funktionen von Bootstrap nutzen möchten, sollten Sie die Ladezeit der Ressourcen sorgfältig abwägen. Natürlich stellt dies an manchen Orten möglicherweise kein Problem dar, aber in Neuseeland muss das Internet über den Pazifik verlegt werden, und die Daten werden dort nur langsam ankommen. Berücksichtigen Sie also Ihren Zielmarkt.

Ich glaube, dass jedes Framework seine Vor- und Nachteile hat. Kein Produkt ist perfekt, also wählen Sie basierend auf Ihrer tatsächlichen Situation. Was einige andere Frameworks betrifft, werde ich vorerst nicht zu viel erklären. Ich glaube, dass Sie die gewünschte Antwort finden können, solange Sie bereit sind, Baidu zu nutzen.

Mobiler Entwicklungsprozess

2. Handgeschriebene mobile Website

Wenn wir die mobile Website manuell selbst entwickeln, können wir sie grundsätzlich in unterteilen zwei Kategorien kommen. Ein Typ wird durch das Hinzufügen von Meta-Tags zum Header der Webseite erreicht (Webseiten werden im HTML5-Format entwickelt). Der andere Typ wird über das Media-Tag (Medienabfrage) von CSS3 implementiert. Freunde, die sich mit Medienabfragen nicht auskennen, können diesen Artikel lesen: Responsive Layout.

Hier erklären wir ausführlich, wie man Meta-Tags zum Erstellen einer mobilen Website verwendet.

Grundsätzlich müssen wir nur vier Meta-Tags zum Kopf der Webseite hinzufügen, um das Framework einer mobilen Website zu implementieren. Lassen Sie mich einen Blick auf die Meta-Tags werfen.

1. Fügen Sie das Ansichtsfenster-Tag

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

Nach dem Login kopieren

Detaillierte Attribute hinzu:

width ---- Die Breite des Ansichtsfensters (width=device-width bedeutet: Die Breite ist gleich zur Gerätebreite)

height ------ Die Höhe des Ansichtsfensters (height=device-height bedeutet: die Höhe ist gleich der Gerätebreite)

initial-scale - ---- Das anfängliche Skalierungsverhältnis

minimum-scale ----- Der minimale Maßstab, auf den der Benutzer zoomen darf

maximum-scale ----- Der maximale Maßstab dass der Benutzer auf

benutzerskalierbar zoomen darf -- --- Ob der Benutzer manuell zoomen kann

关于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" />  
  
  
  
  
  
  
  
  
  
  
  
 
  
  
    
  
  
  
      
  
        大家好！我是段亮，这是我的第一个手机网页哦！

Nach dem Login kopieren

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

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

随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。

原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。

关于手机网站的调试问题

一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。

比如：（Android类手机，iPhone5、5s、6、6Plus...）

而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。

如下图：