1倦春、 Doctype作用睛榄？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
1荣茫、聲明位于位于HTML文檔中的第一行，處于 標(biāo)簽之前场靴。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔计露。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
2憎乙、標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行票罐。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作泞边。
HTML5 不基于 SGML该押，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）阵谚； 而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用蚕礼，才能告知瀏覽器文檔所使用的文檔類型烟具。
2、 viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
width:設(shè)置viewport的寬度奠蹬，值為正整數(shù)或者device-width(設(shè)備寬度);
initial-scale:設(shè)置默認(rèn)縮放比例朝聋；
minimum-scale:允許用戶縮放的最小比例；
maximum-scale:允許用戶縮放的最大比例囤躁；
user-scalable:是否允許手動(dòng)縮放冀痕；
延伸提問：怎樣處理 移動(dòng)端 1px 被渲染成 2px 問題？
1狸演、局部處理
meta 標(biāo)簽中的 viewport 屬性 言蛇，initial-scale 設(shè)置為 1rem 按照設(shè)計(jì)稿標(biāo)準(zhǔn)走，外加利用 transfrome 的 scale(0.5) 縮小一倍即可宵距；
2腊尚、全局處理
meta 標(biāo)簽中的 viewport 屬性 ，initial-scale 設(shè)置為 0.5rem 按照設(shè)計(jì)稿標(biāo)準(zhǔn)走即可
可能用到的meta標(biāo)簽：
3满哪、 實(shí)現(xiàn)跨域的幾種方式
同源策略/SOP（Same origin policy）是一種約定婿斥，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能哨鸭，如果缺少了同源策略受扳，瀏覽器很容易受到XSS、CSRF等攻擊兔跌。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址峡蟋，也非同源坟桅。
1、 通過jsonp跨域蕊蝗，原生實(shí)現(xiàn)：
var script = document.createElement('script');
script.type = 'text/javascript';
// 傳參并指定回調(diào)執(zhí)行函數(shù)為onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回調(diào)執(zhí)行函數(shù)
function onBack(res) {
? ?alert(JSON.stringify(res));
}
2仅乓、nginx 代理跨域
3、nodejs 中間件代理跨域
4蓬戚、后端在頭部信息里面設(shè)置安全域名
4夸楣、塊級(jí)元素有哪些？行內(nèi)元素有哪些子漩？空元素有哪些豫喧？
塊級(jí)元素：div、ul幢泼、ol紧显、li、dl缕棵、dt孵班、dd涉兽、p、h1~h4
行內(nèi)元素：span、img、b秦躯、strong（強(qiáng)調(diào)）孵睬、input、select
空元素：<br>比默、<hr>、<img>
5、 link和@import有什么區(qū)別袋倔？
1、link屬于XHTML標(biāo)簽折柠，除了加載CSS外宾娜，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的扇售，只能用于加載CSS;
2前塔、頁面被加載的時(shí)，link會(huì)同時(shí)被加載承冰，而@import引用的CSS會(huì)等到頁面被加載完再加載;
3华弓、import是CSS2.1 提出的，只在IE5以上才能被識(shí)別困乒，而link是XHTML標(biāo)簽寂屏，無兼容問題;
6、HTML語義化的理解娜搂？
用正確的標(biāo)簽做正確的事情迁霎。html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰百宇，便于對(duì)瀏覽器考廉、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重携御，利于SEO;使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊昌粤，便于閱讀維護(hù)理解
7、?cookies啄刹，sessionStorage 和 localStorage 的區(qū)別涮坐？
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）誓军，記會(huì)在瀏覽器和服務(wù)器間來回傳遞膊升。sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存谭企。存儲(chǔ)大欣搿： cookie數(shù)據(jù)大小不能超過4k评肆。 sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多非区，可以達(dá)到5M或更大瓜挽。有期時(shí)間： localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)征绸； sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除久橙。 cookie 設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉管怠。
8淆衷、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信? (阿里)
WebSocket、SharedWorker渤弛；也可以調(diào)用localstorge祝拯、cookies等本地存儲(chǔ)方式；localstorge另一個(gè)瀏覽上下文里被添加她肯、修改或刪除時(shí)佳头，它都會(huì)觸發(fā)一個(gè)事件，我們通過監(jiān)聽事件晴氨，控制它的值來進(jìn)行頁面信息通信康嘉；注意quirks：Safari 在無痕模式下設(shè)置localstorge值時(shí)會(huì)拋出 QuotaExceededError 的異常；
9籽前、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型亭珍？低版本IE的盒子模型有什么不同的？
1枝哄、有兩種肄梨， IE 盒子模型、W3C 盒子模型膘格；
2、盒模型： 內(nèi)容(content)财松、填充(padding)瘪贱、邊界(margin)、 邊框(border)辆毡；
3菜秦、區(qū) 別： IE的content部分把 border 和 padding計(jì)算了進(jìn)去;
10、 CSS選擇符有哪些舶掖？哪些屬性可以繼承球昨？
1.id選擇器（ # myid）
?2.類選擇器（.myclassname）
?3.標(biāo)簽選擇器（div, h1, p）
?4.相鄰選擇器（h1 + p）
?5.子選擇器（ul > li）
?6.后代選擇器（li a）
?7.通配符選擇器（ * ）
?8.屬性選擇器（a[rel = "external"]）
?9.偽類選擇器（a:hover, li:nth-child）
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
11、CSS優(yōu)先級(jí)算法如何計(jì)算眨攘？
優(yōu)先級(jí)就近原則主慰，同權(quán)重情況下樣式定義最近者為準(zhǔn);載入樣式以最后載入的定位為準(zhǔn);
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高
12嚣州、CSS3新增偽類有那些？
p:first-of-type 選擇屬于其父元素的首個(gè)元素的每個(gè)元素共螺。
p:last-of-type 選擇屬于其父元素的最后元素的每個(gè)元素该肴。?p:only-of-type 選擇屬于其父元素唯一的元素的每個(gè)元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)元素藐不。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)元素匀哄。
:after 在元素之前添加內(nèi)容,也可以用來做清除浮動(dòng)。
:before 在元素之后添加內(nèi)容
:enabled
:disabled 控制表單控件的禁用狀態(tài)雏蛮。
:checked 單選框或復(fù)選框被選中涎嚼。
13、 css定義的權(quán)重
以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1挑秉，class的權(quán)重為10法梯，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
/*權(quán)重為1*/
div{}
/*權(quán)重為10*/
.class1{}
/*權(quán)重為100*/
#id1{}
/*權(quán)重為100+1=101*/
#id1 div{}
/*權(quán)重為10+1=11*/
.class1 div{}
/*權(quán)重為10+10+1=21*/
.class1 .class2 div{}
14衷模、介紹js的基本數(shù)據(jù)類型鹊汛。
Undefined、Null阱冶、Boolean刁憋、Number、String
15木蹬、js有哪些內(nèi)置對(duì)象至耻？
Object 是 JavaScript 中所有對(duì)象的父對(duì)象
數(shù)據(jù)封裝類對(duì)象：Object、Array镊叁、Boolean尘颓、Number 和 String其他對(duì)象：Function、Arguments晦譬、Math疤苹、Date、RegExp敛腌、Error
16卧土、 JavaScript原型，原型鏈 ? 有什么特點(diǎn)像樊？
每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性尤莺，就是prototype(原型)，當(dāng)我們?cè)L問一個(gè)對(duì)象的屬性時(shí)生棍，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性颤霎，那么他就會(huì)去prototype里找這個(gè)屬性，這個(gè)prototype又會(huì)有自己的prototype，于是就這樣一直找下去友酱，也就是我們平時(shí)所說的原型鏈的概念晴音。關(guān)系：instance.constructor.prototype = instance.__proto__
特點(diǎn)：JavaScript對(duì)象是通過引用來傳遞的，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒有一份屬于自己的原型副本粹污。當(dāng)我們修改原型時(shí)段多，與之相關(guān)的對(duì)象也會(huì)繼承這一改變。
當(dāng)我們需要一個(gè)屬性的時(shí)壮吩，Javascript引擎會(huì)先看當(dāng)前對(duì)象中是否有這個(gè)屬性进苍， 如果沒有的話， 就會(huì)查找他的Prototype對(duì)象是否有這個(gè)屬性鸭叙，如此遞推下去觉啊，一直檢索到 Object 內(nèi)建對(duì)象。 function Func(){} Func.prototype.name = "Sean"; Func.prototype.getInfo = function() { return this.name; } var person = new Func();//現(xiàn)在可以參考var person = Object.create(oldObject); console.log(person.getInfo());//它擁有了Func的屬性和方法 //"Sean" console.log(Func.prototype); // Func { name="Sean", getInfo=function()}
17沈贝、JavaScript有幾種類型的值杠人？，你能畫一下他們的內(nèi)存圖嗎宋下？
棧：原始數(shù)據(jù)類型（Undefined嗡善，Null，Boolean学歧，Number罩引、String） 堆：引用數(shù)據(jù)類型（對(duì)象、數(shù)組和函數(shù)）兩種類型的區(qū)別是：存儲(chǔ)位置不同枝笨；原始數(shù)據(jù)類型直接存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段袁铐，占據(jù)空間小、大小固定横浑，屬于被頻繁使用數(shù)據(jù)剔桨，所以放入棧中存儲(chǔ)；引用數(shù)據(jù)類型存儲(chǔ)在堆(heap)中的對(duì)象,占據(jù)空間大徙融、大小不固定,如果存儲(chǔ)在棧中洒缀，將會(huì)影響程序運(yùn)行的性能；引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針欺冀，該指針指向堆中該實(shí)體的起始地址树绩。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址脚猾，取得地址后從堆中獲得實(shí)體
18葱峡、Javascript如何實(shí)現(xiàn)繼承砚哗？
1龙助、構(gòu)造繼承2、原型繼承3、實(shí)例繼承4提鸟、拷貝繼承原型prototype機(jī)制或apply和call方法去實(shí)現(xiàn)較簡(jiǎn)單军援，建議使用構(gòu)造函數(shù)與原型混合方式。
?function Parent(){
?????????????????this.name = 'wang';
?????????}
?????????function Child(){
?????????????????this.age = 28;
?????????}
?????????Child.prototype = new Parent();//繼承了Parent称勋，通過原型
? ? ? ? ?var demo = new Child();
?????????alert(demo.age);
?????????alert(demo.name);//得到被繼承的屬性
?}
19胸哥、eval
它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；
應(yīng)該避免使用eval赡鲜，不安全空厌，非常耗性能（2次，一次解析成js語句银酬，一次執(zhí)行）嘲更。
由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval，var obj =eval('('+ str +')');
20揩瞪、 js常會(huì)問的問題：找出字符串中出現(xiàn)次數(shù)最多的字符赋朦。
let testStr = 'asdasddsfdsfadsfdghdadsdfdgdasd';
? ? ? ? function getMax(str) {
? ? ? ? ? ? let obj = {};
? ? ? ? ? ? for(let i in str) {
? ? ? ? ? ? ? ? if(obj[str[i]]) {
? ? ? ? ? ? ? ? ? ? obj[str[i]]++;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? obj[str[i]] = 1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? let keys = Object.keys(obj); // 獲取對(duì)象中所有key的值返回?cái)?shù)組
? ? ? ? ? ? let values = Object.values(obj); // 獲取所有value返回?cái)?shù)組
? ? ? ? ? ? let maxVal = Math.max(...values);// Math.max可以找出傳入?yún)?shù)的最大值，如：Math.max(1,2);這里可使用es6中的解構(gòu)李破，
也可以使用Math.max.apply(Math,values)可認(rèn)為是apply(Math.max, arr)
然后宠哄，arr是一個(gè)參數(shù)列表，對(duì)于max方法嗤攻，其參數(shù)是若干個(gè)數(shù)毛嫉，即Math.max(a, b, c, d, ...)
? ? ? ? ? ? console.log(keys[values.indexOf(maxVal)],maxVal);
? ? ? ? }
? ? ? ? getMax(testStr);
// obj值：{a: 5, s: 7, d: 12, f: 4, g: 2,? h: 1, s: 7,}
keys[values.indexOf(maxVal)] => value里面最大的數(shù)字的位置，最大數(shù)字位置對(duì)應(yīng)的key屯曹。
maxVal最大的數(shù)狱庇，也就是出現(xiàn)做多的次數(shù)。str[i]是對(duì)應(yīng)字符串中的第i個(gè)字符恶耽，obj[str[i]] 就是對(duì)應(yīng)的每個(gè)字母for循環(huán)就是把里面出現(xiàn)了的字母作為obj這個(gè)對(duì)象的key密任，然后循環(huán)的時(shí)候判斷obj里面有沒有以str[i]為key的對(duì)象，如有偷俭，就把它的value加一浪讳，說明這個(gè)字母在obj中出現(xiàn)的次數(shù)多了一次；剛開始i是鍵名涌萤，str[i]是鍵值淹遵，用這個(gè)鍵值再做obj的鍵名，然后賦值负溪，或累加
eg：
obj[str[i]] = 1;? =>? var obj={};obj.aa = 1;console.log(obj)
//正則
let stringMax = (str) => {
? ? ? ? ? ? str = str.split('').sort().join('');
? ? ? ? ? ? var s = str.match(/(\w+)(\1)/g);
? ? ? ? ? ? if(s === null) {
? ? ? ? ? ? ? ? return str[0];
? ? ? ? ? ? }
? ? ? ? ? ? s = s.map(e => e=e+e[0]);
? ? ? ? ? ? var out = s.sort((a,b) =>b.length - a.length);
? ? ? ? ? ? console.log(out[0][0],out[0].length);
? ? ? ? };
? ? ? ? stringMax(testStr)
30透揣、渲染優(yōu)化
1.禁止使用iframe（阻塞父文檔onload事件）
iframe會(huì)阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面川抡，不利于SEO;
iframe和主頁面共享連接池辐真，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁面的并行加載。
使用 iframe 之前需要考慮這兩個(gè)缺點(diǎn)侍咱。如果需要使用 iframe耐床，最好是通過 javascript 動(dòng)態(tài)給 iframe 添加 src 屬性值，這樣可以繞開以上兩個(gè)問題楔脯。
2.禁止使用gif圖片實(shí)現(xiàn)loading效果（降低CPU消耗撩轰，提升渲染性能）；
3昧廷、使用CSS3代碼代替JS動(dòng)畫（盡可能避免重繪重排以及回流）堪嫂；
4、對(duì)于一些小圖標(biāo)木柬，可以使用base64位編碼溉苛，以減少網(wǎng)絡(luò)請(qǐng)求。但不建議大圖使用弄诲，比較耗費(fèi)CPU愚战；
小圖標(biāo)優(yōu)勢(shì)在于：
1.減少HTTP請(qǐng)求；
2.避免文件跨域齐遵；
3.修改及時(shí)生效寂玲；
5、頁面頭部的?會(huì)阻塞頁面梗摇；（因?yàn)?Renderer進(jìn)程中 JS線程和渲染線程是互斥的）拓哟；
6、頁面頭部?會(huì)阻塞頁面伶授；（因?yàn)?Renderer進(jìn)程中 JS線程和渲染線程是互斥的）断序；
7、頁面中空的 href 和 src 會(huì)阻塞頁面其他資源的加載 (阻塞下載進(jìn)程)糜烹；
8违诗、網(wǎng)頁Gzip，CDN托管疮蹦，data緩存 诸迟，圖片服務(wù)器；
9愕乎、前端模板 JS+數(shù)據(jù)阵苇，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果感论，每次操作本地變量绅项，不用請(qǐng)求，減少請(qǐng)求次數(shù)
10比肄、用innerHTML代替DOM操作快耿，減少DOM操作次數(shù)湿硝，優(yōu)化javascript性能。
11润努、當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
12示括、少用全局變量铺浇、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作垛膝。
13鳍侣、避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。
14吼拥、圖片預(yù)加載倚聚，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳凿可。
15惑折、 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來枯跑，顯示比div+css布局慢惨驶。
對(duì)普通的網(wǎng)站有一個(gè)統(tǒng)一的思路，就是盡量向前端優(yōu)化敛助、減少數(shù)據(jù)庫操作粗卜、減少磁盤IO。 向前端優(yōu)化指的是纳击，在不影響功能和體驗(yàn)的情況下续扔，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器焕数，程序能直接取得的結(jié)果不要到外部取得纱昧，本機(jī)內(nèi)能取得的數(shù)據(jù)不要到遠(yuǎn)程取，內(nèi)存能取到的不要到磁盤取堡赔，緩存中有的不要去數(shù)據(jù)庫查詢砌些。減少數(shù)據(jù)庫操作指減少更新次數(shù)、緩存結(jié)果減少查詢次數(shù)加匈、將數(shù)據(jù)庫執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢）存璃，減少磁盤IO指盡量不使用文件系統(tǒng)作為緩存、減少讀寫文件次數(shù)等雕拼。程序優(yōu)化永遠(yuǎn)要優(yōu)化慢的部分纵东，換語言是無法"優(yōu)化"的。
31啥寇、快速的讓一個(gè)數(shù)組亂序
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){ ?
?????return Math.random() - 0.5;
})
console.log(arr);
32偎球、 字體font-family
@ 宋體 ? ? ?SimSun
@ 黑體 ? ? ?SimHei
@ 微信雅黑 ? Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體 ? ?NSimSun
@ 新細(xì)明體 ?MingLiU
@ 細(xì)明體 ? ?MingLiU
@ 標(biāo)楷體 ? ?DFKai-SB
@ 仿宋 ? ? FangSong
@ 楷體 ? ? KaiTi
@ 仿宋_GB2312 ?FangSong_GB2312
@ 楷體_GB2312 ?KaiTi_GB2312 ?@
@ 說明：中文字體多數(shù)使用宋體洒扎、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
33衰絮、消除 transition 閃屏
css { ? ?-webkit-transform-style: preserve-3d; ? ?-webkit-backface-visibility: hidden; ? ?-webkit-perspective: 1000;
}
過渡動(dòng)畫（在沒有啟動(dòng)硬件加速的情況下）會(huì)出現(xiàn)抖動(dòng)的現(xiàn)象袍冷， 以上的解決方案只是改變視角來啟動(dòng)硬件加速的一種方式；啟動(dòng)硬件加速的另外一種方式：
.css { ? ?-webkit-transform: translate3d(0,0,0); ? ?-moz-transform: translate3d(0,0,0); ? ?-ms-transform: translate3d(0,0,0); ? ?transform: translate3d(0,0,0);
}
啟動(dòng)硬件加速
最常用的方式：translate3d猫牡、translateZ胡诗、transform
opacity 屬性/過渡動(dòng)畫（需要?jiǎng)赢媹?zhí)行的過程中才會(huì)創(chuàng)建合成層，動(dòng)畫沒有開始或結(jié)束后元素還會(huì)回到之前的狀態(tài)）
will-chang 屬性（這個(gè)比較偏僻）淌友，一般配合opacity與translate使用（而且經(jīng)測(cè)試煌恢，除了上述可以引發(fā)硬件加速的屬性外，其它屬性并不會(huì)變成復(fù)合層）震庭。
弊端：硬件加速會(huì)導(dǎo)致 CPU 性能占用量過大瑰抵，電池電量消耗加大 ；因此盡量避免泛濫使用硬件加速器联。
34二汛、JS 判斷設(shè)備來源
/ 判斷移動(dòng)端設(shè)備
function deviceType(){
? ?var ua = navigator.userAgent;
? ?var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
? ?for(var i=0; i0){ ? ? ? ?
? ? ? ? ? ?break; ? ? ? ?} ? ?}
}
deviceType();
window.addEventListener('resize', function(){ ? ?deviceType();
})
// 判斷微信瀏覽器
function isWeixin(){ ? ?var ua = navigator.userAgent.toLowerCase(); ? ?if(ua.match(/MicroMessenger/i)=='micromessenger'){ ? ? ? ?return true; ? ?}else{ ? ? ? ?return false; ? ?}
}
35、 audio元素和video元素在ios和andriod中無法自動(dòng)播放
原因：因?yàn)楦鞔鬄g覽器都為了節(jié)省流量拨拓，做出了優(yōu)化习贫，在用戶沒有行為動(dòng)作時(shí)（交互）不予許自動(dòng)播放；
//音頻千元，寫法一
<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦?</audio>
//音頻苫昌，寫法二
<audio controls="controls"> ?
????source src="music/bg.ogg" type="audio/ogg">
????source src="music/bg.mp3" type="audio/mpeg">
? ? ? ? ?優(yōu)先播放音樂bg.ogg，不支持在播放bg.mp3
</audio>
//JS綁定自動(dòng)播放（操作window時(shí)幸海，播放音樂）
$(window).one('touchstart', function(){ ? ?music.play();
})
//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () { ? ?music.play();
}, false);
//小結(jié)
//1.audio元素的autoplay屬性在IOS及Android上無法使用祟身，在PC端正常；
//2.audio元素沒有設(shè)置controls時(shí)物独，在IOS及Android會(huì)占據(jù)空間大小袜硫，而在PC端Chrome是不會(huì)占據(jù)任何空間；
//3.注意不要遺漏微信的兼容處理需要引用微信JS挡篓；
36婉陷、css實(shí)現(xiàn)單行文本溢出顯示 ...
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
37、實(shí)現(xiàn)多行文本溢出顯示...
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
38官研、讓圖文不可復(fù)制
-webkit-user-select: none;-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
