MobileモバイルWebページ開発共通コードテンプレート

9173 ワード

index.html

<!DOCTYPE HTML>
<html>
<head>
    <!--          -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--    -->
    <title>HTML5       </title>
    <!--     -->
    <meta name="keywords" content="" />
    <!--    -->
    <meta name="description" content="" />
    <!--      -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!--          -->
    <meta name="format-detection" content="telephone=no" />
    <!--        -->
    <meta content="email=no" name="format-detection" />
    <!--iphone safari  meta  ,
         ,        -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--iphone safari         black(  )-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
        /*reset   */
        body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
        td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
        li{list-style:none;vertical-align:top;}
        table{ border-collapse:collapse;}
        textarea{resize:none;overflow:auto;}
        img{ border:none; vertical-align:middle;}
        em{ font-style:normal;}
        a{ text-decoration:none;}
        a,input{
            -webkit-appearance: none;/*    */
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            /*ios android         */
        }
        a, img {
            /*               */
            -webkit-touch-callout: none;
        }
        html, body {
            /*       (        ,     ) */
            -webkit-user-select: none;
            user-select: none;
        }
        /*public*/
        html {
            font-size : 20px;
        }
        @media only screen and (min-width: 401px){
            html {
                font-size: 25px !important;
            }
        }
        @media only screen and (min-width: 428px){
            html {
                font-size: 26.75px !important;
            }
        }
        @media only screen and (min-width: 481px){
            html {
                font-size: 30px !important;
            }
        }
        @media only screen and (min-width: 569px){
            html {
                font-size: 35px !important;
            }
        }
        @media only screen and (min-width: 641px){
            html {
                font-size: 40px !important;
            }
        }
        body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;
            overflow-x:hidden; overflow-y:auto; font-size:0.7rem;
        }
        .clear{zoom:1;}
        .clear:after{content:''; display:block; clear:both;}
        .fl{float:left;}
        .fr{float:right;}
        .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}
    </style>
</head>
<body>
<div>
    <div>       </div>
</div>
</body>
</html>