Heim >Web-Frontend >H5-Tutorial >Tatsächlicher HTML5-Kampf und Analyse: Schauen Sie sich die Struktur des mobilen Terminals Zeile für Zeile an

Tatsächlicher HTML5-Kampf und Analyse: Schauen Sie sich die Struktur des mobilen Terminals Zeile für Zeile an

黄舟Original: 2017-02-10 14:27:481421Durchsuche

Es ist lange her, dass ich meine kleinen Sachen mit euch geteilt habe. Hier möchte Menglong sich bei euch allen entschuldigen. Ich habe mir vorher auch einen langen Urlaub gegönnt.

Aus kleinen persönlichen Gründen bin ich zu einem vielversprechenderen Unternehmen gewechselt und habe vom Web-Frontend auf HTML5 umgestellt. Womit ich es zu tun hatte, veränderte sich auch von der PC-Seite zur mobilen Seite, und ich spürte sofort, dass es eine Menge Dinge gab, die es wert waren, gespielt zu werden. Als ich darüber nachdachte, fühlte ich mich voller Energie.

Während ich weiter spiele, habe ich das Gefühl, dass ich von Zeit zu Zeit einige meiner Erfahrungen mit Menglong mit meinen Kollegen teilen sollte, um allen ein wenig Bequemlichkeit zu bieten.

Okay, ohne weitere Umschweife, schauen wir uns dieses Mal das Thema an – HTML5 Practical Combat and Analysis, indem wir Zeile für Zeile die Struktur des mobilen Terminals betrachten. Zu diesem Thema möchte ich den tatsächlichen Kampf nutzen, um Ihnen die Entwicklung mobiler Endgeräte besser näher zu bringen. Dieses Mal werden wir die bisherige Sharing-Methode untergraben und sie Zeile für Zeile mit echter Munition und Kommentaren erklären.

<!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>

Das Obige ist eine zeilenweise Erklärung und das Folgende ist eine Vorlage ohne Kommentare. Wenn die Entwicklung sie dringend benötigt, können Sie sie einfach direkt kopieren.

<!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>

HTML5-Tatsächlicher Kampf und Analyse Schauen wir uns Zeile für Zeile die Struktur des mobilen Terminals an. Xiaodongdong, ich hoffe, es kann für alle bei der Entwicklung mobiler Endgeräte hilfreich sein. Hier werden einige CSS3-bezogene Kenntnisse verwendet. Wenn Sie mehr über CSS3-bezogene Kenntnisse erfahren möchten, können Sie sich die relevanten Kenntnisse im Abschnitt mit detaillierten Erläuterungen zu CSS3-Attributen auf dieser Website ansehen. Vielen Dank an alle für Ihre Unterstützung.

Das Obige ist der eigentliche Kampf und die Analyse von HTML5, wobei die Struktur des mobilen Endgeräts Zeile für Zeile betrachtet wird. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Übung und Analyse verzögerter SkripteNächster Artikel：HTML5-Übung und Analyse verzögerter Skripte

In Verbindung stehende Artikel

Mehr sehen