<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 -->
<html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
<!-- 聲明文檔使用的字符編碼 -->
<meta charset='utf-8'>
<!-- 優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 頁面描述 -->
<meta name="description" content="不超過150個字符"/>
<!-- 頁面關鍵詞 -->
<meta name="keywords" content=""/>
<!-- 網頁做者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 爲移動設備添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 設備 begin -->
<meta name="apple-mobile-web-app-title" content="標題">
<!-- 添加到主屏後的標題（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄 -->
<input type="text" autocapitalize="off">
<!--關閉iOS鍵盤首字母自動大寫-->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 設置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略頁面中的數字識別爲電話，忽略email識別 -->
<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不讓百度轉碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 針對手持設備優化，主要是針對一些老的不識別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">
<!-- iOS 圖標 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，能夠沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，能夠沒有，但推薦有 -->
<!-- iOS 圖標 end -->
<!-- iOS 啓動畫面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 豎屏 768 x 1004（標準分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 豎屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 橫屏 1024x748（標準分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 橫屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
<!-- iOS 啓動畫面 end -->
<!-- iOS 設備 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁貼圖標 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 訂閱 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交標籤 begin -->
<!-- 參考微博API -->
<meta property="og:type" content="類型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="標題" />
<meta property="og:image" content="圖片" />
<meta property="og:description" content="描述" />
<!-- sns 社交標籤 end -->
<title>標題</title>
</head>
@charset "utf-8";
/********** 1.reset **********/
/* 清除標籤自帶邊距 */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input,textarea,th,td,select,hr,legend,fieldset {margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display: block;}
ul,li {list-style: none;}
input,button,select,textarea {font-family: inherit;font-size: inherit;line-height: inherit;outline: none;background: none;}
textarea {border:none 0;}
iframe[name='google_conversion_frame']{display:none;}/*google 統計樣式*/
img,input,textarea {vertical-align: middle;}/* 保持垂直居中 */
img,hr {border: none 0;}/* 去除img邊框 */
i,em {font-style: normal;}/* 清除字體傾斜 */
/* 設置HTML5標籤 塊元素*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
/*文本框 定義*/
.input{outline:0;color:#999;display:inline-block;padding:0.8em;font-size:14px;font-weight:normal;line-height:1;text-align:left;white-space:nowrap;
vertical-align: middle;background-image: none;border:1px solid #ececec;border-radius: 3px;
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}/*常態輸入框*/
.select{border:1px solid #ececec;padding:4px 0;}
input[type="button"], input[type="text"], input[type="password"], input[type="submit"], input[type="reset"], textarea {
/*表單元素的默認外觀怎麼重置*/
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
}
/*placeholder的顏色設置*/
input::-webkit-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
input::-moz-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
input::-ms-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
input::-o-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
input::input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
/*placeholder獲取焦點時的顏色設置*/
input:focus::-webkit-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
input:focus::-moz-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
input:focus::-ms-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
input:focus::-o-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
input:focus::input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
/********** css零件 **********/
.clearfix:after {content:'';display: block;height: 0;overflow: hidden;clear: both;}
.l{float:left;}
.r{float:right;}
.i{font-style:italic;}
.fN{font-weight: normal;}
.fB{font-weight: bold;}
.rmb{font-family:Arial;}
.dib{display:inline-block;}
.etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.wrap{word-wrap:break-word;}/*強制換行*/
.nowrap{white-space:nowrap;}/*禁止換行*/
.tc{text-align:center;}
@mixin full {
width: 100%;
height: 100%;
overflow: hidden;
}
//clip
@mixin textOverflow($val:ellipsis) {
overflow: hidden;
text-overflow:$val;
white-space: nowrap;
}
html, body {
@include full;
}
html {
font-size: 62.5%;
}
/*兼容多點的彈性盒*/
@mixin box($val:horizontal) { //vertical
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
@if $val == horizontal {
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-moz-box-orient:horizontal;
-moz-box-direction:normal;
flex-direction:row;
-webkit-flex-direction:row;
} @else {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;
}
}
@mixin flex($val:1) {
-webkit-box-flex:$val;
-moz-box-flex:$val;
-ms-box-flex:$val;
-o-box-flex:$val;
box-flex:$val;
-webkit-flex:$val;
-moz-flex:$val;
-ms-flex:$val;
-o-flex:$val;
flex:$val;
}
body {
font-family:'Microsoft YaHei','Helvetica';
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
/*禁用元素被點擊產生的陰影或邊框*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-tap-highlight-color: rgba(0, 0, 0, 0);
-o-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
/*禁止ios和android用戶選中文字*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
/*禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片*/
-webkit-touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
-o-touch-callout: none;
touch-callout: none;
}
/*儘量多的利用硬件能力，如使用3D變形來開啓GPU加速*/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/*如動畫過程有閃爍（一般發生在動畫開始的時候），能夠嘗試下面的Hack：*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
//iscroll4滾動區域中select,input,textarea元素沒法點擊的bug修復
onBeforeScrollStart : function(e){
var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : 」);
if(nodeType != ‘select’ && nodeType != ‘option’ && nodeType != ‘input’ && nodeType != ‘textarea’){e.preventDefault();}
}
/*Android手機$(window).width() Bug
部門安卓手機經過Zepto.js提供得 $(window).width(); $(window).height()獲取瀏覽器視圖寬度與實際寬度不一致。
解決方法：經過document.documentElement.clientWidth 獲取寬度。*/
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
/*添加css樣式：pointer-events: none; 使圖片點透。*/
//高頻觸發事件 採用事件節流 或加以控制---若是中間的code須要處理的東西多的話，FPS就會降低影響程序順滑度,把代碼放在setTimeout中，會發現程序變快.
$('div').on('touchmove', function(){
setTimeout(function(){
//.….code
},0);
});
//封裝好的阻止冒泡、阻止瀏覽器默認行爲
function stopBubble(e) {
if ( e && e.stopPropagation )
e.stopPropagation();
else
window.event.cancelBubble = true;
}
function stopDefault( e ) {
if ( e && e.preventDefault )
e.preventDefault();
else
window.event.returnValue = false;
return false;
}
