移动前端经验小结
1. 移動(dòng)端頭部標(biāo)簽 head meta <!DOCTYPE html> <!-- 使用 HTML5 doctype，不區(qū)分大小寫 -->
<html lang="zh-cmn-Hans"> <!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head><!-- 聲明文檔使用的字符編碼 --><meta charset='utf-8'><!-- 優(yōu)先使用 IE 最新版本和 Chrome --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><!-- 頁面描述 --><meta name="description" content="不超過150個(gè)字符"/><!-- 頁面關(guān)鍵詞 --><meta name="keywords" content=""/><!-- 網(wǎng)頁作者 --><meta name="author" content="name, email@gmail.com"/><!-- 搜索引擎抓取 --><meta name="robots" content="index,follow"/><!-- 為移動(dòng)設(shè)備添加 viewport --><meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"><!-- `width=device-width` 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時(shí)出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 設(shè)備 begin --><meta name="apple-mobile-web-app-title" content="標(biāo)題"><!-- 添加到主屏后的標(biāo)題（iOS 6 新增） --><meta name="apple-mobile-web-app-capable" content="yes"/><!-- 是否啟用 WebApp 全屏模式，刪除蘋果默認(rèn)的工具欄和菜單欄 --><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"/><!-- 設(shè)置蘋果工具欄顏色 --><meta name="format-detection" content="telphone=no, email=no"/><!-- 忽略頁面中的數(shù)字識(shí)別為電話，忽略email識(shí)別 --><!-- 啟用360瀏覽器的極速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 不讓百度轉(zhuǎn)碼 --><meta http-equiv="Cache-Control" content="no-siteapp" /><!-- 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微軟的老式瀏覽器 --><meta name="MobileOptimized" content="320"><!-- uc強(qiáng)制豎屏 --><meta name="screen-orientation" content="portrait"><!-- QQ強(qiáng)制豎屏 --><meta name="x5-orientation" content="portrait"><!-- UC強(qiáng)制全屏 --><meta name="full-screen" content="yes"> <!-- QQ強(qiáng)制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC應(yīng)用模式 --><meta name="browsermode" content="application"><!-- QQ應(yīng)用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 點(diǎn)擊無高光 --><meta name="msapplication-tap-highlight" content="no">
<!-- iOS 圖標(biāo) begin --><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/><!-- iPhone 和 iTouch，默認(rèn) 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 圖標(biāo) end --><!-- iOS 啟動(dòng)畫面 begin --><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/><!-- iPad 豎屏 768 x 1004（標(biāo)準(zhǔn)分辨率） --><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（標(biāo)準(zhǔn)分辨率） --><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 (標(biāo)準(zhǔn)分辨率) --><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 啟動(dòng)畫面 end --><!-- iOS 設(shè)備 end --> <meta name="msapplication-TileColor" content="#000"/><!-- Windows 8 磁貼顏色 --><meta name="msapplication-TileImage" content="icon.png"/><!-- Windows 8 磁貼圖標(biāo) --><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 社交標(biāo)簽 begin --><!-- 參考微博API --><meta property="og:type" content="類型" /><meta property="og:url" content="URL地址" /><meta property="og:title" content="標(biāo)題" /><meta property="og:image" content="圖片" /><meta property="og:description" content="描述" /><!-- sns 社交標(biāo)簽 end -->
<!-- Android設(shè)備-->
<meta content="email=no" name="format-detection" />
去除安卓設(shè)備對(duì)郵箱的自動(dòng)識(shí)別
name屬性詳解:
主要用于描述網(wǎng)頁，對(duì)應(yīng)于content（網(wǎng)頁內(nèi)容），以便于搜索引擎機(jī)器人查找、分類。這其中description（站點(diǎn)在搜索引擎上的描述）和keywords（分類關(guān)鍵詞）是最重要的，所以應(yīng)該:
一、給每頁加一個(gè)meta值。
參數(shù)：Keywords (關(guān)鍵字)
說明：為搜索引擎提供的關(guān)鍵字列表
舉例：<meta name="Keywords" Content="蘇州SEO,網(wǎng)站優(yōu)化，網(wǎng)站推廣,蘇州網(wǎng)絡(luò)營(yíng)銷,……">
提示：各關(guān)鍵詞間用英文逗號(hào)“,"隔開。如果你使用的是中文的標(biāo)點(diǎn)符號(hào)，關(guān)鍵詞將不起作用。meta的通常用處是指定搜索引擎用來提高搜索質(zhì)量的關(guān)鍵詞。當(dāng)數(shù)個(gè)meta元素提供文檔語言從屬信息時(shí)，搜索引擎會(huì)使用lang特性來過濾并通過用戶的語言優(yōu)先。
二、參照來顯示搜索結(jié)果。
例如：<META NAME="Keywords" CONTENT="SEO,網(wǎng)站優(yōu)化,搜索引擎優(yōu)化…"> ???
???????? 參數(shù)：Description (簡(jiǎn)介)
說明：Description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。
舉例：<meta name="Description" Content="你網(wǎng)頁的簡(jiǎn)述">
提示：無
例如：<META NAME="Description" CONTENT="蘇州SEO_Winter為您提供專業(yè)的蘇州網(wǎng)站優(yōu)化、搜索引擎優(yōu)化服務(wù)，通過對(duì)客戶網(wǎng)站優(yōu)化，使客戶網(wǎng)站排名達(dá)到搜索引擎首頁！">
三、參數(shù)：Robots (機(jī)器人向?qū)?
說明：Robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。Content的參數(shù)有all、none、index、noindex、follow、nofollow。默認(rèn)是all。
舉例：<meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
提示：許多搜索引擎都通過放出robot/spider搜索來登錄網(wǎng)站，這些robot/spider就要用到meta元素的一些特性來決定怎樣登錄。
all：文件將被檢索，且頁面上的鏈接可以被查詢；
none：文件將不被檢索，且頁面上的鏈接不可以被查詢；(和 “noindex, no follow" 起相同作用)
index：文件將被檢索；（讓robot/spider登錄）
follow：頁面上的鏈接可以被查詢；
noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；(不讓robot/spider登錄)
nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。(不讓robot/spider順著此頁的連接往下探找)
例如：<META NAME="Robots" CONTENT="All">
四、參數(shù)：Author (作者)
說明：標(biāo)注網(wǎng)頁的作者或制作組
舉例：<meta name="Author" Content="張三，www.uedcss.com“>
提示：Content可以是：你或你的制作組的名字,或Email
例如：<meta name="Author" Content="name，yehon@uedcss.com“>
五、參數(shù)：Copyright (版權(quán))
說明：標(biāo)注版權(quán)
舉例：<meta name="Copyright" Content="本頁版權(quán)歸yehon所有。All Rights Reserved">
提示：無
例如：<META NAME="Copyright" CONTENT="本站版權(quán)歸yehon版權(quán)所有。All Rights Reserved">
六、參數(shù)：Generator (編輯器)
說明：編輯器的說明
舉例：<meta name="Generator" Content="PCDATA|FrontPage|">
提示：Content="你所用編輯器"
例如：<meta name="Generator" Content="PCDATA|FrontPage|">
七、參數(shù)：Language (語言)
說明：網(wǎng)頁語言的說明
舉例：<META NAME="Language" CONTENT="zh-CN">
提示：無
例如：<META NAME="Language" CONTENT="zh-CN">
八、參數(shù)：Designer(設(shè)計(jì)者)
說明：網(wǎng)頁設(shè)計(jì)者的說明
舉例：<META NAME="Designer" CONTENT="your name">
提示：一般而言，發(fā)布者為個(gè)人信息
例如：<META NAME="Designer" CONTENT="name">
九、參數(shù)：Publisher(發(fā)布者)
說明：網(wǎng)站發(fā)布者的說明
舉例：<META NAME="Publisher" CONTENT="your name">
提示：一般而言，發(fā)布者為發(fā)布公司信息
例如：<META NAME="Publisher" CONTENT="web前端寒風(fēng)">
十、參數(shù)：Title(主題)
說明：網(wǎng)站主題說明
舉例：<META NAME="Title" CONTENT="your title">
提示：通常這里的值是網(wǎng)頁的內(nèi)容標(biāo)題
例如：<META NAME="Title" CONTENT="銀行卡快速導(dǎo)航">
十一、參數(shù)：Subject(內(nèi)容的主題)
說明：主要是指這篇文章的主題是什么，核心內(nèi)容是什么。
舉例：<META NAME="Subject" CONTENT="your Subject">
提示：無
例如：<META NAME="Subject" CONTENT="網(wǎng)站前端_web前端寒風(fēng)|優(yōu)設(shè)前端">
十二、參數(shù)：Abstract(摘要)
說明：網(wǎng)頁頁面說明
舉例：<META NAME="Abstract" CONTENT="本網(wǎng)站為學(xué)習(xí)點(diǎn)滴記錄網(wǎng)站">
提示：對(duì)頁面內(nèi)容進(jìn)行簡(jiǎn)短的描述，常見于內(nèi)容頁面中，可以加強(qiáng)搜索引擎對(duì)頁面內(nèi)容的保存，便于用戶搜索。
例如：<META NAME="Abstract" CONTENT="本網(wǎng)站為學(xué)習(xí)點(diǎn)滴記錄網(wǎng)站">
十三、參數(shù)：Expires(期限)
說明：網(wǎng)頁頁面期限
舉例：<META NAME="Expires" CONTENT="time">
提示：必須是GMT標(biāo)準(zhǔn)時(shí)間，定義過期時(shí)間，超過時(shí)間后即不能從cache中掉出。
例如：<META NAME="Expires" CONTENT="Wed, 11 Feb 2010 00:51:09 EST">
十四、參數(shù)：Distribution(分配目標(biāo))
說明：META NAME在那些頁面有效
舉例：<META NAME="Distribution" CONTENT="Global">
提示：是指網(wǎng)站都在哪些地區(qū)范圍出現(xiàn)，一般設(shè)置為Global即為全球范圍。
例如：<META NAME="Distribution" CONTENT="Global">
十五、參數(shù)：Revisit-After(重訪時(shí)間)
說明：一般大型網(wǎng)站，蜘蛛爬行頻率相當(dāng)頻繁，導(dǎo)致服務(wù)器重壓。因此做這樣的限制是讓蜘蛛在限定日期內(nèi)重訪，例如7 days就是七天訪問一次
舉例：<META NAME="Revisit-After" CONTENT="N Days">
提示：是指網(wǎng)站都在哪些地區(qū)范圍出現(xiàn)，一般設(shè)置為Global即為全球范圍。
例如：<META NAME="Revisit-After" CONTENT="7 days">
還不是做了很多的測(cè)試和他們自己，雖然 CodeGo.net，他們幾乎肯定不會(huì)得到什么好處的IE瀏覽器。可以在Windows或也許火狐雖然。上次我檢查，它們會(huì)自動(dòng)沒有反鋸齒小東西就像他們?cè)贠SX系統(tǒng)。 更新 這些都不是在IE或Firefox的支持。字體光滑標(biāo)簽僅適用于iOS的Safari瀏覽器，據(jù)我?
3.?哦，是的，您可以： -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");
<!-- iOS 設(shè)備 begin --><meta name="apple-mobile-web-app-title" content="標(biāo)題"><!-- 添加到主屏后的標(biāo)題（iOS 6 新增） --><meta name="apple-mobile-web-app-capable" content="yes"/><!-- 是否啟用 WebApp 全屏模式，刪除蘋果默認(rèn)的工具欄和菜單欄 --><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"/><!-- 設(shè)置蘋果工具欄顏色 --><meta name="format-detection" content="telphone=no, email=no"/><!-- 忽略頁面中的數(shù)字識(shí)別為電話，忽略email識(shí)別 --><!-- 啟用360瀏覽器的極速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 不讓百度轉(zhuǎn)碼 --><meta http-equiv="Cache-Control" content="no-siteapp" /><!-- 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微軟的老式瀏覽器 --><meta name="MobileOptimized" content="320"><!-- uc強(qiáng)制豎屏 --><meta name="screen-orientation" content="portrait"><!-- QQ強(qiáng)制豎屏 --><meta name="x5-orientation" content="portrait"><!-- UC強(qiáng)制全屏 --><meta name="full-screen" content="yes"> <!-- QQ強(qiáng)制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC應(yīng)用模式 --><meta name="browsermode" content="application"><!-- QQ應(yīng)用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 點(diǎn)擊無高光 --><meta name="msapplication-tap-highlight" content="no">
<!-- iOS 圖標(biāo) begin --><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/><!-- iPhone 和 iTouch，默認(rèn) 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 圖標(biāo) end --><!-- iOS 啟動(dòng)畫面 begin --><link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/><!-- iPad 豎屏 768 x 1004（標(biāo)準(zhǔn)分辨率） --><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（標(biāo)準(zhǔn)分辨率） --><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 (標(biāo)準(zhǔn)分辨率) --><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 啟動(dòng)畫面 end --><!-- iOS 設(shè)備 end --> <meta name="msapplication-TileColor" content="#000"/><!-- Windows 8 磁貼顏色 --><meta name="msapplication-TileImage" content="icon.png"/><!-- Windows 8 磁貼圖標(biāo) --><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 社交標(biāo)簽 begin --><!-- 參考微博API --><meta property="og:type" content="類型" /><meta property="og:url" content="URL地址" /><meta property="og:title" content="標(biāo)題" /><meta property="og:image" content="圖片" /><meta property="og:description" content="描述" /><!-- sns 社交標(biāo)簽 end -->
<!-- Android設(shè)備-->
<meta content="email=no" name="format-detection" />
去除安卓設(shè)備對(duì)郵箱的自動(dòng)識(shí)別
name屬性詳解:
主要用于描述網(wǎng)頁，對(duì)應(yīng)于content（網(wǎng)頁內(nèi)容），以便于搜索引擎機(jī)器人查找、分類。這其中description（站點(diǎn)在搜索引擎上的描述）和keywords（分類關(guān)鍵詞）是最重要的，所以應(yīng)該:
一、給每頁加一個(gè)meta值。
參數(shù)：Keywords (關(guān)鍵字)
說明：為搜索引擎提供的關(guān)鍵字列表
舉例：<meta name="Keywords" Content="蘇州SEO,網(wǎng)站優(yōu)化，網(wǎng)站推廣,蘇州網(wǎng)絡(luò)營(yíng)銷,……">
提示：各關(guān)鍵詞間用英文逗號(hào)“,"隔開。如果你使用的是中文的標(biāo)點(diǎn)符號(hào)，關(guān)鍵詞將不起作用。meta的通常用處是指定搜索引擎用來提高搜索質(zhì)量的關(guān)鍵詞。當(dāng)數(shù)個(gè)meta元素提供文檔語言從屬信息時(shí)，搜索引擎會(huì)使用lang特性來過濾并通過用戶的語言優(yōu)先。
二、參照來顯示搜索結(jié)果。
例如：<META NAME="Keywords" CONTENT="SEO,網(wǎng)站優(yōu)化,搜索引擎優(yōu)化…"> ???
???????? 參數(shù)：Description (簡(jiǎn)介)
說明：Description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。
舉例：<meta name="Description" Content="你網(wǎng)頁的簡(jiǎn)述">
提示：無
例如：<META NAME="Description" CONTENT="蘇州SEO_Winter為您提供專業(yè)的蘇州網(wǎng)站優(yōu)化、搜索引擎優(yōu)化服務(wù)，通過對(duì)客戶網(wǎng)站優(yōu)化，使客戶網(wǎng)站排名達(dá)到搜索引擎首頁！">
三、參數(shù)：Robots (機(jī)器人向?qū)?
說明：Robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。Content的參數(shù)有all、none、index、noindex、follow、nofollow。默認(rèn)是all。
舉例：<meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
提示：許多搜索引擎都通過放出robot/spider搜索來登錄網(wǎng)站，這些robot/spider就要用到meta元素的一些特性來決定怎樣登錄。
all：文件將被檢索，且頁面上的鏈接可以被查詢；
none：文件將不被檢索，且頁面上的鏈接不可以被查詢；(和 “noindex, no follow" 起相同作用)
index：文件將被檢索；（讓robot/spider登錄）
follow：頁面上的鏈接可以被查詢；
noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；(不讓robot/spider登錄)
nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。(不讓robot/spider順著此頁的連接往下探找)
例如：<META NAME="Robots" CONTENT="All">
四、參數(shù)：Author (作者)
說明：標(biāo)注網(wǎng)頁的作者或制作組
舉例：<meta name="Author" Content="張三，www.uedcss.com“>
提示：Content可以是：你或你的制作組的名字,或Email
例如：<meta name="Author" Content="name，yehon@uedcss.com“>
五、參數(shù)：Copyright (版權(quán))
說明：標(biāo)注版權(quán)
舉例：<meta name="Copyright" Content="本頁版權(quán)歸yehon所有。All Rights Reserved">
提示：無
例如：<META NAME="Copyright" CONTENT="本站版權(quán)歸yehon版權(quán)所有。All Rights Reserved">
六、參數(shù)：Generator (編輯器)
說明：編輯器的說明
舉例：<meta name="Generator" Content="PCDATA|FrontPage|">
提示：Content="你所用編輯器"
例如：<meta name="Generator" Content="PCDATA|FrontPage|">
七、參數(shù)：Language (語言)
說明：網(wǎng)頁語言的說明
舉例：<META NAME="Language" CONTENT="zh-CN">
提示：無
例如：<META NAME="Language" CONTENT="zh-CN">
八、參數(shù)：Designer(設(shè)計(jì)者)
說明：網(wǎng)頁設(shè)計(jì)者的說明
舉例：<META NAME="Designer" CONTENT="your name">
提示：一般而言，發(fā)布者為個(gè)人信息
例如：<META NAME="Designer" CONTENT="name">
九、參數(shù)：Publisher(發(fā)布者)
說明：網(wǎng)站發(fā)布者的說明
舉例：<META NAME="Publisher" CONTENT="your name">
提示：一般而言，發(fā)布者為發(fā)布公司信息
例如：<META NAME="Publisher" CONTENT="web前端寒風(fēng)">
十、參數(shù)：Title(主題)
說明：網(wǎng)站主題說明
舉例：<META NAME="Title" CONTENT="your title">
提示：通常這里的值是網(wǎng)頁的內(nèi)容標(biāo)題
例如：<META NAME="Title" CONTENT="銀行卡快速導(dǎo)航">
十一、參數(shù)：Subject(內(nèi)容的主題)
說明：主要是指這篇文章的主題是什么，核心內(nèi)容是什么。
舉例：<META NAME="Subject" CONTENT="your Subject">
提示：無
例如：<META NAME="Subject" CONTENT="網(wǎng)站前端_web前端寒風(fēng)|優(yōu)設(shè)前端">
十二、參數(shù)：Abstract(摘要)
說明：網(wǎng)頁頁面說明
舉例：<META NAME="Abstract" CONTENT="本網(wǎng)站為學(xué)習(xí)點(diǎn)滴記錄網(wǎng)站">
提示：對(duì)頁面內(nèi)容進(jìn)行簡(jiǎn)短的描述，常見于內(nèi)容頁面中，可以加強(qiáng)搜索引擎對(duì)頁面內(nèi)容的保存，便于用戶搜索。
例如：<META NAME="Abstract" CONTENT="本網(wǎng)站為學(xué)習(xí)點(diǎn)滴記錄網(wǎng)站">
十三、參數(shù)：Expires(期限)
說明：網(wǎng)頁頁面期限
舉例：<META NAME="Expires" CONTENT="time">
提示：必須是GMT標(biāo)準(zhǔn)時(shí)間，定義過期時(shí)間，超過時(shí)間后即不能從cache中掉出。
例如：<META NAME="Expires" CONTENT="Wed, 11 Feb 2010 00:51:09 EST">
十四、參數(shù)：Distribution(分配目標(biāo))
說明：META NAME在那些頁面有效
舉例：<META NAME="Distribution" CONTENT="Global">
提示：是指網(wǎng)站都在哪些地區(qū)范圍出現(xiàn)，一般設(shè)置為Global即為全球范圍。
例如：<META NAME="Distribution" CONTENT="Global">
十五、參數(shù)：Revisit-After(重訪時(shí)間)
說明：一般大型網(wǎng)站，蜘蛛爬行頻率相當(dāng)頻繁，導(dǎo)致服務(wù)器重壓。因此做這樣的限制是讓蜘蛛在限定日期內(nèi)重訪，例如7 days就是七天訪問一次
舉例：<META NAME="Revisit-After" CONTENT="N Days">
提示：是指網(wǎng)站都在哪些地區(qū)范圍出現(xiàn)，一般設(shè)置為Global即為全球范圍。
例如：<META NAME="Revisit-After" CONTENT="7 days">
?2.?有沒有在CSS3這些激動(dòng)人心的新標(biāo)簽：
font-smooth:always; -webkit-font-smoothing: antialiased;還不是做了很多的測(cè)試和他們自己，雖然 CodeGo.net，他們幾乎肯定不會(huì)得到什么好處的IE瀏覽器。可以在Windows或也許火狐雖然。上次我檢查，它們會(huì)自動(dòng)沒有反鋸齒小東西就像他們?cè)贠SX系統(tǒng)。 更新 這些都不是在IE或Firefox的支持。字體光滑標(biāo)簽僅適用于iOS的Safari瀏覽器，據(jù)我?
3.?哦，是的，您可以： -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. 自適應(yīng)布局模式 （-webkit-box;）
? 父級(jí) display:-webkit-box; ?-webkit-box-orient: horizontal; ?（水平/垂直）
? 子級(jí): -webkit-box-flex: 1; (比例為1)
? ? ? ? ? -webkit-box-flex: 2; (比例為2)
? ? ? ? ? -webkit-box-flex: 3; (比例為3)
? ? ? ? ?平均分布。
5. 控制ios自動(dòng)開啟字母大寫
? autocapitalize = "off" ?關(guān)閉大寫
6. 阻止IOS長(zhǎng)按屏幕時(shí)的彈出菜單/保存圖片
-webkit-touch-callout: none; ?(inherit 不被禁用)
7. ?阻止IOS用戶選擇頁面文字
-webkit-user-select:none;
?
8. 設(shè)置鏈接獲取焦點(diǎn)時(shí)的背景色
? ?-webkit-tap-highlight-color: rgba(0,0,0,.5); ?(可一是一個(gè)透明色);
9. IOS中如何獲取滾動(dòng)條的值(android設(shè)備可以獲取到值，但ios不能)
? ?可以通過window.scrollY和window.scrollX我們可以得到當(dāng)前窗口的y軸和x軸滾動(dòng)條的值。
?10. 移動(dòng)端適配方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body>iphone 3G 物理尺寸 屏幕密度ppi 像素分辨率px(320*480) 邏輯分辨率ptiphone4 (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作為基準(zhǔn)尺寸原因： 從中間尺寸向上和向下適配時(shí)調(diào)整的幅度最小；實(shí)現(xiàn)：文字流式(fluid)控件彈性(flexible)圖片等比縮放(scale)@media 適配不同尺寸手機(jī) (device-pixel-ratio 為設(shè)備像素與設(shè)備獨(dú)立像素比 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){ }根據(jù)不同設(shè)備寬度在根元素上設(shè)置不同字體大小一般會(huì)設(shè)置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份為1remdocEl.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);根據(jù) devicePixelRatio 設(shè)定 initial-scale 來放大 viewport，使頁面按照物理像素渲染，提升清晰度/*** MobileWeb 通用功能助手，包含常用的 UA 判斷、頁面適配、search 參數(shù)轉(zhuǎn) 鍵值對(duì)。* 該 JS 應(yīng)在 head 中盡可能早的引入，減少重繪。** fixScreen 方法根據(jù)兩種情況適配，該方法自動(dòng)執(zhí)行。* 1. 定寬： 對(duì)應(yīng) meta 標(biāo)簽寫法 -- <meta name="viewport" content="target-densitydpi=device-dpi,width=750">* 該方法會(huì)提取 width 值，主動(dòng)添加 scale 相關(guān)屬性值。* 注意： 如果 meta 標(biāo)簽中指定了 initial-scale， 該方法將不做處理（即不執(zhí)行）。* 2. REM: 不用寫 meta 標(biāo)簽，該方法根據(jù) dpr 自動(dòng)生成，并在 html 標(biāo)簽中加上 data-dpr 和 font-size 兩個(gè)屬性值。* 該方法約束：IOS 系統(tǒng)最大 dpr = 3，其它系統(tǒng) dpr = 1，頁面每 dpr 最大寬度（即頁面寬度/dpr） = 750，REM 換算比值為 16。* 對(duì)應(yīng) css 開發(fā)，任何彈性尺寸均使用 rem 單位，rem 默認(rèn)寬度為 視覺稿寬度 / 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, // 據(jù)說某些國(guó)產(chǎn)機(jī)的UA會(huì)同時(shí)包含 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 ) { // REMvar 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;}},/*** 轉(zhuǎn)href參數(shù)成鍵值對(duì)* @param href {string} 指定的href，默認(rèn)為當(dāng)前頁href* @returns {object} 鍵值對(duì)*/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);// 默認(rèn)直接適配頁面mobileUtil.fixScreen(); </body> </html> View Code?
?
待續(xù)……
?轉(zhuǎn)載于:https://www.cnblogs.com/fanxiaowu/p/4632717.html
總結(jié)
- 上一篇： JAVA设计模式--简单介绍
- 下一篇： 看美文，记单词(6)