手机网站页面模板

Posted susutong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机网站页面模板相关的知识,希望对你有一定的参考价值。

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>手机网站</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <script type="text/javascript">
            //根据屏幕大小及dpi调整缩放和大小
            (function() {
                var scale = 1.0;
                var ratio = 1;
                if(window.devicePixelRatio >= 2) {
                    scale *= 0.5;
                    ratio *= 2;
                }
                var text = <meta name="viewport" content="initial-scale= + scale + , maximum-scale= + scale + , minimum-scale= + scale + , width=device-width, user-scalable=no" />;
                document.write(text);
                document.documentElement.style.fontSize = 50 * ratio + "px";
            })();
        </script>
        <!--启用 WebApp 全屏模式(ios-->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-touch-fullscreen" content="yes" />
        <!--设置状态栏的背景颜色(IOS),在web app应用下状态条(屏幕顶部条)的颜色-->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--添加到主屏后的标题(IOS)-->
        <meta name="apple-mobile-web-app-title" content="标题">
        <link rel="icon" href="http://ms0.meituan.net/touch/img/icon/favicon.ico" type="image/x-icon">
        <!--苹果移动设备(ipod、ipad、iphone)对移动网站-mobile web进行收藏(“添加到桌面图标”)的时候增加的图标定义属性-->
        <link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://ms0.meituan.net/touch/img/startup/apple-touch-icon-57x57-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://ms0.meituan.net/touch/img/startup/apple-touch-icon-120x120-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="196x196" href="http://ms0.meituan.net/touch/img/startup/apple-touch-icon-196x196-precomposed.png">
        <!--IOS Web app启动动画-->
        <link rel="apple-touch-startup-image" href="http://ms0.meituan.net/touch/img/startup/apple-touch-startup-image-640x1096.png" media="(device-height:568px)">
        <link rel="apple-touch-startup-image" href="http://ms0.meituan.net/touch/img/startup/apple-touch-startup-image-640x920.png" media="(device-height:480px)">
        <!-- iPhone -->
        <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
        <!-- iPhone (Retina) -->
        <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (portrait) -->
        <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
        <!-- iPad (landscape) -->
        <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, portrait) -->
        <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, landscape) -->
        <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!--移动端手机号码识别(IOS)-->
        <meta name="format-detection" content="telephone=no">
        <!--移动端邮箱识别(android-->
        <meta name="format-detection" content="address=no">
        <!--优先使用最新版本 IE 和 Chrome-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <link href="css/style.css" rel="stylesheet" />
        <style>
            body {
                font-size: 62.5%;
                font-family: "Microsoft YaHei", Arial;
                overflow-x: hidden;
                overflow-y: auto;
            }
            
            .viewport {
                max-width: 640px;
                min-width: 300px;
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div>
            大家好!这是手机网页!
        </div>
    </body>

</html>

 

以上是关于手机网站页面模板的主要内容,如果未能解决你的问题,请参考以下文章

装修装饰工程企业网站手机的模板 !简单实用 !

开发中经常用到的特效效果

开发中经常用到的特效效果

哪些网站有直接可以复用的产品原型模板?

织梦仿小刀娱乐网模板资源资讯类网站模板(自适应手机端)

仿eplie触屏版html5响应式手机wap网站模板