一屹培、<meta> 標(biāo)簽提供了有關(guān)頁面的元信息，例如作者怔檩、日期和時(shí)間褪秀、網(wǎng)頁描述、關(guān)鍵詞等薛训，除了SEO媒吗，在移動端瀏覽器中它還有著更多的功能：
- 作者、日期和時(shí)間乙埃、網(wǎng)頁描述闸英、關(guān)鍵詞等
<meta name="baidu-site-verification" content="v7UEg8ALz5" />
<meta name="keywords" content="直播、現(xiàn)場直播介袜、攝像機(jī)"/>
<meta name="description" content="通過青果攝像機(jī)自阱，可進(jìn)行全方位現(xiàn)場直播。"/>
<meta name="author" content="yangdaidi"/>
- 開啟響應(yīng)式視窗
<!-- 視窗大小等于設(shè)備大小米酬，初始大小為1.0，不允許用戶縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
- 忽略電話號碼與郵箱的識別
<!-- 忽略電話號碼的識別 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略郵箱的識別 -->
<meta name="format-detection" content="email=no">
- 設(shè)置safari書簽以及主屏幕圖標(biāo)
<!-- 應(yīng)用圖標(biāo)漸變 -->
<link rel="apple-touch-icon-precomposed" href="./icon.png">
<!-- 不應(yīng)用圖標(biāo)漸變 -->
<link rel="apple-touch-icon" href="./icon.png">
- 開啟iphone上webapp支持(將網(wǎng)頁保存到iphone桌面)
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 刪除默認(rèn)的瀏覽器地址欄和工具欄（以app模式打開趋箩，否則以瀏覽器模式）,如果沒有自帶返回鍵赃额，建議使用瀏覽器模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<!-- 頂欄為white，網(wǎng)上查到還可以選為 black 和 black-translucent叫确，自測IOS9.0以后這兩種顏色已經(jīng)失效 -->
- 設(shè)置safari書簽以及主屏幕圖標(biāo)
<!-- 應(yīng)用圖標(biāo)漸變 -->
<link rel="apple-touch-icon-precomposed" href="./icon.png">
<!-- 不應(yīng)用圖標(biāo)漸變 -->
<link rel="apple-touch-icon" href="./icon.png">
<!-- 不同屏幕分辨率下需引入單獨(dú)圖標(biāo) -->
<link rel="apple-touch-icon-precomposed" href="./icon(57px).png" />
<link rel="apple-touch-icon-precomposed" href="./icon(72px).png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="./icon(76px).png" sizes="76x76" />
<link rel="apple-touch-icon-precomposed" href="./icon(114px).png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="./icon(120px).png" sizes="120x120" />
<link rel="apple-touch-icon-precomposed" href="./icon(152px).png" sizes="152x152" />
二跳芳、移動端CSS常用小技巧：
- 禁止長按文本選中
class{
-webkit-user-select:none;
user-select:none;
}
- 禁止觸摸點(diǎn)擊陰影
class{
-webkit-tap-highlight-color: transparent;
}
- 禁止輸入框?yàn)g覽器默認(rèn)行為
class{
-webkit-appearance:none;
}
- 禁止長按彈出列表欄
class{
-webkit-touch-callout:none;
}
- 阻止移動設(shè)備字體自動進(jìn)行大小調(diào)整
<!-- 1、該屬性只在移動設(shè)備上生效竹勉； 2飞盆、如果你的頁面沒有定義meta viewport，此屬性定義將無效 -->
class{
-webkit-text-size-adjust:none;
}
三次乓、CSS常用小技巧（PC端也適用）：
- 解決ineline-block相鄰元素之間3px間距的問題
父元素上增加CSS：font-size:0
- div比被其包裹的img多出3px
需要把img設(shè)置為block
//原因：img是一種類似text的元素吓歇，在結(jié)束的時(shí)候，會在末尾加上一個(gè)空白符票腰，所以就會多出3px
- css 動畫硬件加速（hack）
//CSS動畫不會默認(rèn)開啟GPU加速城看，而是由瀏覽器的軟件渲染引擎來執(zhí)行可以通過一些hack來讓瀏覽器開啟GPU加速
.class {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
<!-- 其他動畫 -->
//Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速
}
- 一行與任意行文本，溢出部分顯示 省略號（...）
<!-- 單行文本 -->
.class {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
<!-- 任意行文本（hack） -->
.class {
overflow: hidden;
word-break:break-all;
text-overflow : ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//此處為行數(shù)
-webkit-box-orient: vertical;
}
四杏慰、滾動條
- 開啟滾動條
.element{
white-space: nowrap;
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
- 自定義滾動條樣式
.element::-webkit-scrollbar{/* 1 */} /*滾動條垂直方向的寬度與水平方向的高度*/
.element::-webkit-scrollbar-button{/* 2 */} /*滾動條按鈕*/
.element::-webkit-scrollbar-track{/* 3 */} /*滾動條軌道*/
.element::-webkit-scrollbar-track-piece{/* 4 */} /*滾動條垂直方向軌道件*/
.element::-webkit-scrollbar-thumb{/* 5 */} /*滾動條軌道上的按鈕*/
.element::-webkit-scrollbar-corner{/* 6 */} /*滾動條軌道上的滾動角*/
.element::-webkit-resizer{/* 7 */} /*窗口大小調(diào)整*/
<!-- 除了1以外测柠，其它幾點(diǎn)目前實(shí)現(xiàn)不是很好炼鞠，不建議使用 -->
scroll.jpg
- 隱藏滾動條
.element::-webkit-scrollbar {display:none;} 建議不要使用，會造成滑動卡頓轰胁，可以用下面的替代
.element::-webkit-scrollbar {width:0;}
<!-- width:0在安卓上可以去除滾動條谒主，IOS滑動過程中會出現(xiàn)，停止后滾動條消失赃阀，也會偶現(xiàn)滾動過程中不出現(xiàn)滾動條的情況 -->
- 滾動條位置控制
1霎肯、通過設(shè)置element.scrollLeft控制，如ul.scrollLeft=200凹耙，單位為px(不用添加)
2姿现、可用于將導(dǎo)航滾動條的選擇li定位到正中
ul.scrollLeft = li.offsetLeft - screen.width/ 2 + li.style.width/2;
五、video標(biāo)簽
- webview中視頻小窗口播放
在video標(biāo)簽里加入webkit-playsinline屬性即可(前提是webview允許肖抱，否則設(shè)置無效)
六备典、autio標(biāo)簽
- ios中音頻文件無法自動播放
1、微信中禁止音視頻自動播放
2意述、...
| 內(nèi)核 | 播放器特征 | Unicode 應(yīng)用代表 |
|---|---|---|
| 原生webkit | 1提佣、在較高ios版本中支持WebView小窗口播放，在非WebView中只能全屏播放2荤崇、正常獲取播放器播放狀態(tài)3拌屏、可正常獲取播放器網(wǎng)絡(luò)狀態(tài)4、更改播放器靜態(tài)寬高比會造成其顯示紊亂 | safari术荤、chrome倚喂、微信、QQ瓣戚、易信端圈、微博 |
| UCBrowser | 1、不能獲取播放器播放狀態(tài)2子库、可正常獲取播放器網(wǎng)絡(luò)狀態(tài)3舱权、默認(rèn)全屏播放，可以小窗口播放 | UCBrowser |
| QQBrowser X5 | 1仑嗅、可正常獲取播放器播放狀態(tài)2宴倍、可正常獲取播放器網(wǎng)絡(luò)狀態(tài)3、播放器的CSS樣式定位紊亂4仓技、可以小窗口播放 | QQBrowser鸵贬、部分版本QQ |
七、字體編碼
寫css時(shí)脖捻，通常需要設(shè)置字體名稱,我們可以直接寫中文,但是文件編碼為GB2312恭理、UTF-8等不匹配將會出現(xiàn)亂碼。因此將中文字體名稱轉(zhuǎn)為unicode編碼來避免出現(xiàn)這些錯(cuò)誤郭变。常見的中文字符unicode編碼如下：
eg: font-family: "微軟雅黑" -> font-family: "5fae8f6f96c59ed1"
| 字體名稱 | 英文名稱 | Unicode 編碼 |
|---|---|---|
| 宋體 | SimSun | 5b8b4f53 |
| 新宋體 | NSimSun | 65b05b8b4f53 |
| 黑體 | SimHei | 9ed14f53 |
| 微軟雅黑 | Microsoft YaHei | 5fae8f6f96c59ed1 |
| 楷體_GB2312 | KaiTi_GB2312 | 69774f53_gb2312 |
| 隸書 | LiSu | 96b64e66 |
| 幼園 | YouYuan | 5e7c5706 |
| 華文細(xì)黑 | STXihei | 534e65877ec69ed1 |
| 細(xì)明體 | MingLiU | 7ec6660e4f53 |
| 新細(xì)明體 | PMingLiU | 65b07ec6660e4f53 |
八颜价、圖片資源的加載
- 在網(wǎng)頁中引入圖片資源:
在該元素上無論添加 display:none; 或者 visibility:hidden; 都會對圖片資源發(fā)起請求使用<img>標(biāo)簽或者是CSS中的background-image 相同 - 使用CSS中的background-image引入圖片:
在其父元素上添visibility:hidden; 仍然會對圖片發(fā)起請求涯保，但是若使用 display:none; 就不會發(fā)起請求了 - 使用<img>標(biāo)簽引入圖片
在元素上或者是在其父元素上，無論添加 display:none; 或者 visibility:hidden; 仍然會對圖片資源發(fā)起請求
未完待續(xù)周伦。夕春。。
