手机网站页面模板
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>
以上是关于手机网站页面模板的主要内容，如果未能解决你的问题，请参考以下文章