#我趣通用模板
---
### PC端模板
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//static.zhangyoubao.com">
<!-- 啟用雙核瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>your title</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="掌游寶">
<link rel="shortcut icon" href="http://static.zhangyoubao.com/favicon.jpg">
......
</head>
<body>
......(語義化代碼)
<script>
//百度統計代碼
</script>
</body>
</html>
```
### 移動端百分比布局模板
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//static.zhangyoubao.com">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 設置蘋果工具欄顏色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<title>your title</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="掌游寶">
<link rel="shortcut icon" href="http://static.zhangyoubao.com/favicon.jpg">
......
</head>
<body>
......(語義化代碼)
<script>
//百度統計代碼
</script>
</body>
</html>
```
### 移動端REM布局模板
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//static.zhangyoubao.com">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<!-- 刪除蘋果默認的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 設置蘋果工具欄顏色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<title>your title</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="掌游寶">
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("將根據已有的meta標簽來設置縮放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=a.navigator.userAgent,q=(!!p.match(/android/gi),!!p.match(/iphone/gi)),r=q&&!!p.match(/OS 9_3/),s=a.devicePixelRatio;i=q&&!r?s>=3&&(!i||i>=3)?3:s>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var t=e.createElement("div");t.appendChild(g),e.write(t.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
<link rel="shortcut icon" href="http://static.zhangyoubao.com/favicon.jpg">
......
</head>
<body>
......(語義化代碼)
<script>
//百度統計代碼
</script>
</body>
</html>
```
