Processus de développement de sites Web mobiles HTML5_html5 compétences du didacticiel-Tutoriel H5-php.cn

J'ai récemment étudié le développement de sites Web mobiles et j'ai découvert que créer des sites Web mobiles n'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 c’est difficile et j’ai l’impression de ne pas savoir 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érez 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, toute personne ayant un œil perspicace Le saura d'un coup d'œil. Quelle technologie est utilisée ? Comme le dit le proverbe : "Un profane peut voir l'excitation, mais 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 avons rencontrés 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 le dire directement : 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

Attributs détaillés :

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

Copier après la connexion

Pour les principes détaillés et les points de connaissance de la fenêtre d'affichage, veuillez vous rendre sur Baidu. ! Je ne l'expliquerai pas en détail ici.

2. Il est interdit de changer des numéros en numéros de téléphone

Dans des circonstances normales, les systèmes IOS et Android utiliseront par défaut des numéros d'une certaine longueur comme numéros de téléphone, même s'ils ne sont pas ajoutés, il sera affiché comme numéro de téléphone par défaut, il faut donc l'annuler !

3. La balise méta privée Safari dans les appareils iPhone

Cela signifie : autoriser la navigation en mode plein écran, masquer la barre de navigation du navigateur

4. . iphone La balise privée

précise le style de la barre d'état en haut de Safari sur 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>

Copier après la connexion

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

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

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

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

关于手机网站的调试问题

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

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

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

如下图：