Processus de développement de sites Web mobiles HTML5-tutoriel HTML-php.cn

Cet article présente principalement le processus de développement d'un site Web mobile HTML5 pour tout le monde. Les amis qui souhaitent développer un site Web mobile peuvent s'y référer

J'ai récemment étudié le développement d'un site Web mobile et j'ai découvert que le site Web mobile l'est. pas aussi difficile qu'on l'imaginait. Pourquoi tu dis ça ? Pensons-y : nous pouvons même créer un site Web traditionnel sur PC, mais ne pouvons-nous même pas créer un petit site Web mobile ? En fait, un site Web mobile n’est qu’une version miniature d’un site Web PC ! Quant à savoir pourquoi je trouve cela difficile et je ne sais pas par où commencer.

Je pense qu'il y a les points suivants :

1. Il n'y a pas d'idée ni de processus complets

Tout comme le processus de création d'un site Web, si vous pouvez savoir Grâce à son processus, je pense que vous n'aurez pas de difficulté à créer un site Web mobile ! Ce qui est vraiment difficile, c’est que vous n’en avez aucune idée.

2. Considérer la technologie HTML5 comme impénétrable

Il semble qu'apprendre à utiliser HTML5+css3 pour créer un site Web mobile équivaut à apprendre les meilleurs arts martiaux sans égal. En fait tu as tort ! Ne réfléchissez pas trop au HTML5. En fait, lorsque vous créez un site Web mobile, vous n’avez pas vraiment besoin des puissantes fonctionnalités du HTML5. (Peut-être pour certains débutants qui ne connaissent pas grand chose en technologie : votre site Web mobile est créé avec HTML5+CSS3, ce qui est génial ! Il peut utiliser la technologie la plus récente et la plus avant-gardiste sur Internet. En fait, si vous avez un œil perspicace, vous verrez Sachez de quelle technologie il est fait. Comme le dit le proverbe : "Un profane peut voir l'excitation, un expert peut dire la vérité")

D'accord, maintenant que j'ai beaucoup parlé. , parlons de comment développer un site Web mobile !

Fondamentalement, le développement de sites Web mobiles peut être grossièrement divisé en deux catégories. La première consiste à utiliser des frameworks pour développer des sites Web mobiles. Un type est le site Web mobile manuscrit.

1. Développement de framework pour sites Web mobiles

Les frameworks de développement généralement utilisés sont : actuellement le framework le plus populaire pour le front-end Web (BootStrap), Jquery mobile.. . Bien sûr, c'est possible. Il existe également des frameworks de développement mobile, que je n'ai pas étudiés en détail.

Pourquoi BootStrap est-il le framework de développement front-end le plus populaire actuellement ?

Parce que bootstrap est livré avec une mise en page réactive (système de grille) et peut implémenter le principe d'abord de l'appareil mobile.

Quels sont les avantages d'utiliser bootstrap pour développer un site Web ?

1. Vous pouvez créer un site Web même si vous ne comprenez pas le design

Même si vous ne comprenez pas le design, votre page Web peut toujours avoir une belle apparence avec l'aide de Bootstrap. Sa puissante bibliothèque de styles intégrée donne à votre travail un aspect époustouflant.

Principalement reflété dans : les fichiers de polices et le propre style d'interface utilisateur de bootstrap. (Une bonne nouvelle pour les programmeurs qui ne savent pas comment concevoir une interface utilisateur)

2. Commencez rapidement

Vous pouvez vous concentrer sur la résolution du problème et laisser Bootstrap s'occuper des détails fastidieux. à propos de. Il peut être développé une seule fois et adapté à tous les terminaux, et vous pouvez rapidement vous lancer et construire un prototype de site Web. Il fournit également de nombreux plug-ins riches. Même si vous ne connaissez pas JS, vous pouvez essentiellement comprendre les API courantes et résoudre les effets sur le site Web.

Inconvénients :

1. Ne pas suivre les meilleures pratiques

L'un des plus gros problèmes que nous rencontrons lors de l'utilisation de Bootstrap est que vos éléments DOM seront encombrés d'un grand nombre de classes. . Cela enfreint l’une des règles de base d’une bonne conception Web : le HTML n’a plus de sémantique et le contenu et la présentation ne sont plus séparés. Les puristes du front-end trouveront cela plutôt ennuyeux, arguant que cela rend l'évolutivité, la réutilisabilité et la maintenance encore plus difficiles.

2. Bootstrap est trop lourd

Pour parler franchement : CSS et JS sont un peu lourds. CSS vaut 115k après compression, JS vaut 35k après compression

Si vous souhaitez utiliser toutes les fonctionnalités de Bootstrap, vous devez soigneusement réfléchir au temps de chargement des ressources. Bien sûr, dans certains endroits, cela ne pose peut-être pas de problème, mais en Nouvelle-Zélande, Internet doit traverser le Pacifique et les données mettront du temps à y parvenir. Considérez donc votre marché cible.

Je crois que tout framework a ses avantages et ses inconvénients. Aucun produit n’est parfait, alors choisissez en fonction de votre situation réelle. Quant à certains autres frameworks, je n'expliquerai pas grand-chose pour le moment. Je pense que tant que vous êtes prêt à utiliser Baidu, vous pouvez trouver la réponse que vous voulez.

Processus de développement mobile

2. Site Web mobile manuscrit

Généralement, si nous développons le site Web mobile manuellement par nous-mêmes, nous pouvons essentiellement le diviser en deux catégories arrivent. Un type est obtenu en ajoutant des balises méta à l'en-tête de la page Web (la page Web est développée au format HTML5). L'autre type est implémenté via la balise Media (media query) de CSS3. Les amis qui ne connaissent pas les requêtes multimédias peuvent lire cet article : Responsive Layout.

Ici, nous expliquerons en détail comment utiliser les balises méta pour créer un site Web mobile.

En gros, il suffit d'ajouter quatre balises méta à l'en-tête de la page Web pour mettre en œuvre le cadre d'un site Web mobile. Permettez-moi de jeter un œil aux balises méta.

1. Ajoutez la balise viewport

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

Copier après la connexion

Attributs détaillés :

width ---- La largeur de la fenêtre d'affichage (width=device-width signifie : la largeur est égal à la largeur de l'appareil)

hauteur ------ La hauteur de la fenêtre d'affichage (height=device-height signifie : la hauteur est égale à la largeur de l'appareil)

initial- scale ----- Mise à l'échelle initiale

minimum-scale ----- L'échelle minimale sur laquelle l'utilisateur est autorisé à zoomer

maximum-scale ----- L'échelle maximale que l'utilisateur est autorisé à zoomer sur

évolutif par l'utilisateur ----- Indique si l'utilisateur peut zoomer manuellement

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

Copier après la connexion

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

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

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

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

关于手机网站的调试问题

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

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

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

如下图：