ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5の実戦と分析：モバイル端末の構造を一行ずつ見てみる
HTML5の実戦と分析：モバイル端末の構造を一行ずつ見てみる
- 黄舟オリジナル
- 2017-02-10 14:27:481423ブラウズ
長い間、私の小さなことを皆さんと共有してきましたが、ここで、Menglong が皆さんにお詫びを申し上げたいと思います。私も以前、長期休暇を取りました。
ちょっとした個人的な理由で、より有望な会社に転職し、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 中国語 Web サイト (www.php.cn) に注目してください。