1. 移動端頭部標籤 head meta
<!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 全屏模式，刪除蘋果默認的工具欄和菜單欄 --> <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 -->
<!-- Android設備-->
<meta content="email=no" name="format-detection" />
去除安卓設備對郵箱的自動識別
name屬性詳解:
主要用於描述網頁，對應於content（網頁內容），以便於搜索引擎機器人查找、分類。這其中description（站點在搜索引擎上的描述）和keywords（分類關鍵詞）是最重要的，因此應該:
1、給每頁加一個meta值。
參數：Keywords (關鍵字)
說明：爲搜索引擎提供的關鍵字列表
舉例：<meta name="Keywords" Content="蘇州SEO,網站優化，網站推廣,蘇州網絡營銷,……">
提示：各關鍵詞間用英文逗號「,"隔開。若是你使用的是中文的標點符號，關鍵詞將不起做用。meta的一般用處是指定搜索引擎用來提升搜索質量的關鍵詞。當數個meta元素提供文檔語言從屬信息時，搜索引擎會使用lang特性來過濾並經過用戶的語言優先。
2、參照來顯示搜索結果。
例如：<META NAME="Keywords" CONTENT="SEO,網站優化,搜索引擎優化…">
參數：Description (簡介)
說明：Description用來告訴搜索引擎你的網站主要內容。
舉例：<meta name="Description" Content="你網頁的簡述">
提示：無
例如：<META NAME="Description" CONTENT="蘇州SEO_Winter爲您提供專業的蘇州網站優化、搜索引擎優化服務，經過對客戶網站優化，使客戶網站排名達到搜索引擎首頁！">
3、參數：Robots (機器人嚮導)
說明：Robots用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。Content的參數有all、none、index、noindex、follow、nofollow。默認是all。
舉例：<meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
提示：許多搜索引擎都經過放出robot/spider搜索來登陸網站，這些robot/spider就要用到meta元素的一些特性來決定怎樣登陸。
all：文件將被檢索，且頁面上的連接能夠被查詢；
none：文件將不被檢索，且頁面上的連接不能夠被查詢；(和 「noindex, no follow" 起相同做用)
index：文件將被檢索；（讓robot/spider登陸）
follow：頁面上的連接能夠被查詢；
noindex：文件將不被檢索，但頁面上的連接能夠被查詢；(不讓robot/spider登陸)
nofollow：文件將不被檢索，頁面上的連接能夠被查詢。(不讓robot/spider順着此頁的鏈接往下探找)
例如：<META NAME="Robots" CONTENT="All">
4、參數：Author (做者)
說明：標註網頁的做者或製做組
舉例：<meta name="Author" Content="張三，www.uedcss.com「>
提示：Content能夠是：你或你的製做組的名字,或Email
例如：<meta name="Author" Content="name，yehon@uedcss.com「>
5、參數：Copyright (版權)
說明：標註版權
舉例：<meta name="Copyright" Content="本頁版權歸yehon全部。All Rights Reserved">
提示：無
例如：<META NAME="Copyright" CONTENT="本站版權歸yehon版權全部。All Rights Reserved">
6、參數：Generator (編輯器)
說明：編輯器的說明
舉例：<meta name="Generator" Content="PCDATA|FrontPage|">
提示：Content="你所用編輯器"
例如：<meta name="Generator" Content="PCDATA|FrontPage|">
7、參數：Language (語言)
說明：網頁語言的說明
舉例：<META NAME="Language" CONTENT="zh-CN">
提示：無
例如：<META NAME="Language" CONTENT="zh-CN">
8、參數：Designer(設計者)
說明：網頁設計者的說明
舉例：<META NAME="Designer" CONTENT="your name">
提示：通常而言，發佈者爲我的信息
例如：<META NAME="Designer" CONTENT="name">
9、參數：Publisher(發佈者)
說明：網站發佈者的說明
舉例：<META NAME="Publisher" CONTENT="your name">
提示：通常而言，發佈者爲發佈公司信息
例如：<META NAME="Publisher" CONTENT="web前端寒風">
10、參數：Title(主題)
說明：網站主題說明
舉例：<META NAME="Title" CONTENT="your title">
提示：一般這裏的值是網頁的內容標題
例如：<META NAME="Title" CONTENT="銀行卡快速導航">
11、參數：Subject(內容的主題)
說明：主要是指這篇文章的主題是什麼，核心內容是什麼。
舉例：<META NAME="Subject" CONTENT="your Subject">
提示：無
例如：<META NAME="Subject" CONTENT="網站前端_web前端寒風|優設前端">
12、參數：Abstract(摘要)
說明：網頁頁面說明
舉例：<META NAME="Abstract" CONTENT="本網站爲學習點滴記錄網站">
提示：對頁面內容進行簡短的描述，常見於內容頁面中，能夠增強搜索引擎對頁面內容的保存，便於用戶搜索。
例如：<META NAME="Abstract" CONTENT="本網站爲學習點滴記錄網站">
十3、參數：Expires(期限)
說明：網頁頁面期限
舉例：<META NAME="Expires" CONTENT="time">
提示：必須是GMT標準時間，定義過時時間，超過期間後即不能從cache中掉出。
例如：<META NAME="Expires" CONTENT="Wed, 11 Feb 2010 00:51:09 EST">
十4、參數：Distribution(分配目標)
說明：META NAME在那些頁面有效
舉例：<META NAME="Distribution" CONTENT="Global">
提示：是指網站都在哪些地區範圍出現，通常設置爲Global即爲全球範圍。
例如：<META NAME="Distribution" CONTENT="Global">
十5、參數：Revisit-After(重訪時間)
說明：通常大型網站，蜘蛛爬行頻率至關頻繁，致使服務器重壓。所以作這樣的限制是讓蜘蛛在限定日期內重訪，例如7 days就是七天訪問一次
舉例：<META NAME="Revisit-After" CONTENT="N Days">
提示：是指網站都在哪些地區範圍出現，通常設置爲Global即爲全球範圍。
例如：<META NAME="Revisit-After" CONTENT="7 days">
2. 有沒有在CSS3這些激動人心的新標籤：css
還不是作了不少的測試和他們本身，雖然 CodeGo.net，他們幾乎確定不會獲得什麼好處的IE瀏覽器。能夠在Windows或也許火狐雖然。上次我檢查，它們會自動沒有反鋸齒小東西就像他們在OSX系統。 更新 這些都不是在IE或Firefox的支持。字體光滑標籤僅適用於iOS的Safari瀏覽器，據我
3. 哦，是的，您能夠：font-smooth:always; -webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased; /* -moz-font-smoothing: antialiased; - No longer available in FF */ font-smoothing: antialiased;
3. 只能說是神器
!function(){ var scaleH=window.innerHeight / 516; var resizes = document.querySelectorAll('.resize'); for (var j = 0; j < resizes.length; j++) { var r=resizes[j]; r.style.width = parseInt(r.style.width) * scaleW + 'px'; r.style.height = parseInt(r.style.height) * scaleH + 'px'; r.style.top = parseInt(r.style.top) * scaleH + 'px'; r.style.left = parseInt(r.style.left) * scaleW + 'px'; } }(); var scaleW = window.innerWidth / 320; $("#viewport").attr('content', "width=320, initial-scale=" + scaleW + ", user-scalable=0");
4. 自適應佈局模式 （-webkit-box;）html
父級 display:-webkit-box; -webkit-box-orient: horizontal; （水平/垂直）前端
子級: -webkit-box-flex: 1; (比例爲1)android
-webkit-box-flex: 2; (比例爲2)
-webkit-box-flex: 3; (比例爲3)ios
平均分佈。web
5. 控制ios自動開啓字母大寫chrome
autocapitalize = "off" 關閉大寫windows
6. 阻止IOS長按屏幕時的彈出菜單/保存圖片api
-webkit-touch-callout: none; (inherit 不被禁用)瀏覽器
7. 阻止IOS用戶選擇頁面文字
-webkit-user-select:none;
8. 設置連接獲取焦點時的背景色
-webkit-tap-highlight-color: rgba(0,0,0,.5); (可一是一個透明色);
9. IOS中如何獲取滾動條的值(android設備能夠獲取到值，但ios不能)
能夠經過window.scrollY和window.scrollX咱們能夠獲得當前窗口的y軸和x軸滾動條的值。
10. 移動端適配方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> iphone 3G 物理尺寸 屏幕密度ppi 像素分辨率px(320*480) 邏輯分辨率pt iphone4 (640*960) iphone5 (640*1136) iphone5s 4 326 (640*1136) (326*568) iphone6 4.7 326 (750*1334) (375*667) iphone6Plus 5.5 401 (1242*2208) (414*736) ipad (768*1024) ipad retina (1536*2048) android (480*800) android (480*854) android (540*960) android (600*1024) android (720*1280) android (800*1280) android (1048*1920) 一般選擇iphone6做爲基準尺寸 緣由： 從中間尺寸向上和向下適配時調整的幅度最小； 實現： 文字流式(fluid) 控件彈性(flexible) 圖片等比縮放(scale) @media 適配不一樣尺寸手機 (device-pixel-ratio 爲設備像素與設備獨立像素比 iphone6爲2) @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */} @media only screen and (max-device-width :480px){ } @media only screen and (min-device-width :481px){ } /*6*/ @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ } /*6+*/ @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ } /*魅族*/ @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ } /*mate7*/ @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ } /*4 4s*/ @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ } 根據不一樣設備寬度在根元素上設置不一樣字體大小 通常會設置1rem爲1/10屏幕寬度 ; (function(win) { var doc = win.document; var docEl = doc.documentElement; var tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width > 540) { // 最大寬度 width = 540; } var rem = width / 10; // 將屏幕寬度分紅10份， 1份爲1rem docEl.style.fontSize = rem + 'px'; } win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); refreshRem(); })(window); 根據 devicePixelRatio 設定 initial-scale 來放大 viewport，使頁面按照物理像素渲染，提高清晰度 /** * MobileWeb 通用功能助手，包含經常使用的 UA 判斷、頁面適配、search 參數轉 鍵值對。 * 該 JS 應在 head 中儘量早的引入，減小重繪。 * * fixScreen 方法根據兩種狀況適配，該方法自動執行。 * 1. 定寬： 對應 meta 標籤寫法 -- <meta name="viewport" content="target-densitydpi=device-dpi,width=750"> * 該方法會提取 width 值，主動添加 scale 相關屬性值。 * 注意： 若是 meta 標籤中指定了 initial-scale， 該方法將不作處理（即不執行）。 * 2. REM: 不用寫 meta 標籤，該方法根據 dpr 自動生成，並在 html 標籤中加上 data-dpr 和 font-size 兩個屬性值。 * 該方法約束：IOS 系統最大 dpr = 3，其它系統 dpr = 1，頁面每 dpr 最大寬度（即頁面寬度/dpr） = 750，REM 換算比值爲 16。 * 對應 css 開發，任何彈性尺寸均使用 rem 單位，rem 默認寬度爲 視覺稿寬度 / 16; * scss 中 $ppr(pixel per rem) 變量寫法 -- $ppr: 750px/16/1rem; * 元素尺寸寫法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。 */ window.mobileUtil = (function(win, doc) { var UA = navigator.userAgent, isAndroid = /android|adr/gi.test(UA), isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 聽說某些國產機的UA會同時包含 android iphone 字符 isMobile = isAndroid || isIos; // 粗略的判斷 return { isAndroid: isAndroid, isIos: isIos, isMobile: isMobile, isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA), isWeixin: /MicroMessenger/gi.test(UA), isQQ: /QQ\/\d/gi.test(UA), isYixin: /YiXin/gi.test(UA), isWeibo: /Weibo/gi.test(UA), isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA), tapEvent: isMobile ? 'tap' : 'click', /** * 縮放頁面 */ fixScreen: function() { var metaEl = doc.querySelector('meta[name="viewport"]'), metaCtt = metaEl ? metaEl.content : '', matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/), matchWidth = metaCtt.match(/width=([^,\s]+)/); if ( !metaEl ) { // REM var docEl = doc.documentElement, maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大頁面寬度 dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1, scale = 1 / dpr, tid; docEl.removeAttribute('data-mw'); docEl.dataset.dpr = dpr; metaEl = doc.createElement('meta'); metaEl.name = 'viewport'; metaEl.content = fillScale(scale); docEl.firstElementChild.appendChild(metaEl); var refreshRem = function() { var width = docEl.getBoundingClientRect().width; if (width / dpr > maxwidth) { width = maxwidth * dpr; } var rem = width / 16; docEl.style.fontSize = rem + 'px'; }; win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); refreshRem(); } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定寬 var width = parseInt(matchWidth[1]), iw = win.innerWidth || width, ow = win.outerWidth || iw, sw = win.screen.width || iw, saw = win.screen.availWidth || iw, ih = win.innerHeight || width, oh = win.outerHeight || ih, ish = win.screen.height || ih, sah = win.screen.availHeight || ih, w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah), scale = w / width; if ( scale < 1 ) { metaEl.content = metaCtt + ',' + fillScale(scale); } } function fillScale(scale) { return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale; } }, /** * 轉href參數成鍵值對 * @param href {string} 指定的href，默認爲當前頁href * @returns {object} 鍵值對 */ getSearch: function(href) { href = href || win.location.search; var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" ); href && href.replace(reg,function( $0, $1, $2, $3 ){ data[ $1 ] = $3; }); return data; } }; })(window, document); // 默認直接適配頁面 mobileUtil.fixScreen(); </body> </html>
待續……