手機網站頁面模板
阿新 • • 發佈：2018-11-16
back apple -s 增加 ava content 新版本 bsp 定義
<!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>
手機網站頁面模板