Maison >interface Web >Tutoriel H5 >Combat réel et analyse HTML5 : regardez la structure du terminal mobile ligne par ligne

Combat réel et analyse HTML5 : regardez la structure du terminal mobile ligne par ligne

黄舟original: 2017-02-10 14:27:481423parcourir

Cela fait longtemps que je n'ai pas partagé mes petites affaires avec vous. Ici, Menglong souhaite vous présenter à tous ses excuses. Je m'étais aussi accordé de longues vacances auparavant.

Pour de petites raisons personnelles, j'ai changé pour une entreprise plus prometteuse et suis passé du front-end Web au HTML5. Ce à quoi j'avais affaire a également changé du côté PC au côté mobile, et j'ai immédiatement senti qu'il y avait beaucoup de choses qui valaient la peine d'être jouées, et je me sentais plein d'énergie quand j'y pensais.

Alors que je continue à jouer, je pense que de temps en temps je devrais partager une partie de mon expérience avec Menglong avec mes collègues pour offrir un peu de commodité à tout le monde.

D'accord, sans plus tarder, regardons le thème de cette fois - HTML5 Practical Combat and Analysis, en regardant la structure du terminal mobile ligne par ligne. Concernant ce sujet, je souhaite utiliser le combat réel pour mieux partager avec vous des éléments sur le développement des terminaux mobiles. Cette fois, nous allons renverser la méthode de partage précédente et l'expliquer ligne par ligne avec de vraies munitions et commentaires.

<!doctype html>

<!-- 

  <!doctype html> 一般的手机网站都以此开头，这个开头和html5开头的文档说明是一样的。主要应用在webapp此类的项目中。 

-->

<html>

<!--

  移动端开发的html标签和HTML5标签一样，比较之前版本的都比较简单了

-->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--

  meta标签对文档的类型说明，这个标签是必要存在的。无论互联网还是手机网站都要有这个！
  很多手机功能都是用meta标签实现的，在这里不得不承认meta标签的伟大！

-->

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

<!--

  上面的meta标签，针对手机网站才会管用。
  name="viewport"的意思是使用视图窗口，
  width=device-width的意思是其宽度等于设备的相对宽度
  initial-scale=1.0的意思是初始放大倍数为1倍，
  maximum-scale=1.0, minimum-scale=1.0意思是最大和最小的放大倍数为1倍。
  user-scalable=no的意思是停止手动放大缩小功能，有了这句话，"maximum-scale=1.0, minimum-scale=1.0"形容虚设了就

-->

<meta name="apple-mobile-web-app-capable" content="yes" />

<!--

  上面的meta标签，专属的移动网站的meta标签，此标签主要针对的是IOS系统的。
  有了这个标签，便可以自定义保存至主屏幕的ICO图标。
  在用IOS自带的safari浏览器中的"添加到主屏幕"功能的时候就会产生自定义的logo
  "添加到主屏幕"的功能是由WebApp变成桌面App的方法，在safari浏览器中可找到。

-->

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!--

  上面这组meta标签表示的是当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。
  默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
  这个主要是根据实际的页面设计的主体色为搭配来进行设置。
  这个支持IOS的，少部分android也支持

-->


<link rel="apple-touch-startup-image" href="images/start.jpg"/>

<!--

  表示在点击主屏幕中生成的快捷图标后，网站在加载过程中，显示的图片。
  这个功能用户体验很好。避免加载时的白屏，减少用户等待网站加载过程的烦闷。
  缺陷是目前只支持竖屏浏览模式，横屏浏览时不支持。

-->


<!--
	以下标签为选用内容 
	只有添加了 <meta name="apple-mobile-web-app-capable" content="yes" /> 标签之后才会生效
-->

<link rel="apple-touch-icon" href="images/iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />

<!-- 

  上面这三项是针对不同版本自定义的不同的主屏幕图标。当然不定义也可以，点击主屏幕时，会以当前屏幕截图作为图标的。
  而其中apple-touch-icon表示的该图标是自动加高光的图标按钮。
  与之相对应的是apple-touch-icon-precomposed。按原设计不加高光效果的图标。可根据实际项目情况，选择使用。

-->

<link rel="stylesheet" type="text/css" href="print.css"  media="only handheld and (max-width: 480px)"/>

<!--

  上面的link标签指明了外部的样式链接，但是有条件的。这个条件就是使用media来进行设置的。它表明的意思是说仅应用在手持设备上，且最大屏幕宽度为480px;

!-->

<title>梦龙小站</title>

</head>
<body>
</body>
</html>

Ce qui précède est une explication ligne par ligne, et ce qui suit est un modèle sans commentaires, si le développement en a besoin de toute urgence, vous pouvez simplement le copier directement.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="apple-touch-startup-image" href="images/start.jpg"/>

<link rel="apple-touch-icon" href="images/iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />

<link rel="stylesheet" type="text/css" href="print.css"  media="only handheld and (max-width: 480px)"/>
<title>梦龙小站</title>
</head>
<body>
</body>
</html>

Combat réel et analyse HTML5. Regardons la structure du terminal mobile ligne par ligne. Aujourd'hui, nous vous présentons principalement la structure du terminal mobile. Xiaodongdong, j'espère que cela pourra être utile à tout le monde dans le développement des terminaux mobiles. Certaines connaissances liées à CSS3 sont utilisées ici. Si vous souhaitez en savoir plus sur CSS3, n'hésitez pas à consulter les connaissances pertinentes dans la section d'explication détaillée des attributs CSS3 de ce site. Merci à tous pour votre soutien.

Ce qui précède est le combat et l'analyse réels du HTML5, en examinant la structure du terminal mobile ligne par ligne. Pour plus de contenu connexe, veuillez faire attention au site Web chinois PHP (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pratique HTML5 et analyse des scripts retardésArticle suivant：Pratique HTML5 et analyse des scripts retardés

Articles Liés

Voir plus