HTML5-Entwicklungsprozess für mobile Websites_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Ich habe mich kürzlich mit der Entwicklung mobiler Websites befasst und festgestellt, dass die Erstellung mobiler Websites gar nicht so schwierig ist 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 schwierig ist und ich das Gefühl habe, nicht zu wissen, 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. Betrachten Sie die Technologie von HTML5 als unergründlich

Es scheint, dass das Erlernen der Verwendung von HTML5 CSS3 zum Erstellen einer mobilen Website dem Erlernen der unvergleichlichen Kampfkünste gleichkommt . 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 wurde mit HTML5 CSS3 erstellt, was großartig ist! Sie kann die neueste und modernste Technologie im Internet nutzen. Eigentlich jeder mit einem anspruchsvollen Auge wird es auf einen Blick erkennen. Wie das Sprichwort sagt: „Ein Laie kann die Aufregung sehen, aber ein Experte kann die Wahrheit sagen“)

Okay, jetzt, wo ich viel geredet habe, Lassen Sie uns darüber sprechen, wie Sie eine mobile Website entwickeln!

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 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 eine Benutzeroberfläche entwirft)

2. Schnell loslegen

Sie können sich auf die Lösung des Problems konzentrieren und die mühsamen Details Bootstrap überlassen um. 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. Selbst 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 ist das an manchen Orten vielleicht kein Problem, aber in Neuseeland muss das Internet über den Pazifik laufen und die Daten werden nur langsam dort 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 verwenden.

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 (die Webseite wird 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 Viewport-Tag hinzu

Detaillierte Attribute:

width  ----  viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height ------  viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放

Nach dem Login kopieren

Für die detaillierten Prinzipien und Wissenspunkte von Viewport gehen Sie bitte zu Baidu ! Ich werde es hier nicht im Detail erklären.

2. Es ist verboten, Nummern in Telefonnummern umzuwandeln

Unter normalen Umständen verwenden IOS- und Android-Systeme standardmäßig Nummern mit einer bestimmten Länge als Telefonnummern Wenn sie nicht hinzugefügt werden, wird sie standardmäßig als Telefonnummer angezeigt, daher ist es notwendig, dies abzubrechen!

3. Das Safari-Privat-Meta-Tag in iPhone-Geräten

Es bedeutet: Vollbildmodus-Browsing zulassen, Browser-Navigationsleiste ausblenden

4 . iphone Das private Tag

gibt den Stil der Statusleiste oben in Safari im iPhone

默认值为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>

Nach dem Login kopieren

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

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

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

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

关于手机网站的调试问题

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

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

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

如下图：