首頁  >  文章  >  web前端  >  HTML5實戰與剖析之一行一行看移動端結構

HTML5實戰與剖析之一行一行看移動端結構

黄舟
黄舟原創
2017-02-10 14:27:481399瀏覽

  很久不跟大家分享小東東了,在這裡夢龍向大家說聲對不起啦。之前,也給自己放了個長假。

  因為個人小原因換了個比較有前途的公司,從Web前端變成了HTML5了。我打交道的也從PC端變成了行動端,瞬間也覺得有很多值得玩的東西了,想到這裡也感覺渾身充滿了幹勁兒。

  在不斷玩的期間,我感覺也時不常的應該向同行分享一些夢龍心得,為大家提供一些小小便利。

  好了,閒話不多說,還是看這次的主題——HTML5實戰與剖析之一行一行看移動端結構。針對這次的主題,我想用實戰來為大家更好的分享一下那些有關行動端開發的事兒。這次將顛覆以前以往的分享形式,真槍實彈用註釋的方式為大家一行一行解釋。


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



  上面是一行一行的解釋,下面是一個沒有註解的模板,開發要是急用可以直接複製。

<!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實戰與剖析之一行一行看移動端結構就為大家介紹到這裡了,今天主要為大家介紹了一下有關移動端在結構方面的小東東,希望能對大家在移動端方面的開發有所幫助。這裡面運用了些CSS3的相關知識,欲了解CSS3的相關知識盡情在本站的CSS3屬性詳解板塊中查看相關知識。感謝大家支持。

以上就是HTML5實戰與剖析之一行一行看移動端結構 的內容,更多相關內容請關注PHP中文網(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn