1. 程式人生 > >移動端html基本模版

移動端html基本模版

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>移動端圖片輪播</title>
    <noscript>Your browser does not support JavaScript!</noscript>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!--
        1. 強制讓文件與裝置的寬度保持1:1
        2. 文件的最大的寬度比例是1.0, 最小也是 1.0
        3. user-scalable 定義是否可以縮放(0為不縮放),使頁面固定裝置頁面的大小
    -->
    <meta name="format-detection" content="telephone=no" />
    <!--
        1. 使裝置瀏覽網頁使不啟用電話功能
    -->

    <!--  ios 裝置對 meta 定義的似有屬性 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--
        1. 網站開啟對web app 程式的支援
    -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--
        1. 在web app應用下狀態條(螢幕頂部條)的顏色;
        2. 預設值為default(白色),可以定為black(黑色)和black-translucent(灰色半透明)。
    -->
    <link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
    <!--
        1. 設定web app 的 icon 和 啟動介面
        2. href  指的是圖片檔案路徑
    -->
    <meta name="apple-touch-fullscreen" content="yes">
    <!--
       1. meta的作用就是刪除預設的蘋果工具欄和選單欄
   -->
    <link rel="dns-prefetch" href="//mc.meituan.net">
    <link rel="dns-prefetch" href="//p1.meituan.net">
    <!--
        1. dns 預獲取,是網頁前端的優化技術
    -->
    <link rel="icon" href="http://mc.meituan.net/touch/img/icon/favicon.ico" type="image/x-icon">
    <!--
        1. 設定網頁的icon
    -->
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://mc.meituan.net/touch/img/startup/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://mc.meituan.net/touch/img/startup/apple-touch-icon-120x120-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="196x196" href="http://mc.meituan.net/touch/img/startup/apple-touch-icon-196x196-precomposed.png">
    <link rel="apple-touch-startup-image" media="(device-height:568px)" href="http://mc.meituan.net/touch/img/startup/apple-touch-startup-image-640x1096.png">
    <link rel="apple-touch-startup-image" media="(device-height:480px)" href="http://mc.meituan.net/touch/img/startup/apple-touch-startup-image-640x920.png">
    <!--
        1. 設定 web app 的圖示
        2. 使用apple-touch-icon屬性為“增加高光光亮的圖示”;使用apple-touch-icon-precomposed屬性為“設計原圖圖示”。

    -->
</head>
<body>

<div class="content">
    <div id="bodyCont" class="screen-wrap fullscreen" tpl-ref="">
        <!-- 內容區域 -->
    </div>
</div>

<script type="text/javascript">
    (function(){
        // 程式碼區域
    })();
</script>

</body>
</html>