一、<meta> 標簽提供了有關(guān)頁面的元信息，例如作者、日期和時間、網(wǎng)頁描述、關(guān)鍵詞等，除了SEO，在移動端瀏覽器中它還有著更多的功能：
- 作者、日期和時間、網(wǎng)頁描述、關(guān)鍵詞等
<meta name="baidu-site-verification" content="v7UEg8ALz5" />
<meta name="keywords" content="直播、現(xiàn)場直播、攝像機"/>
<meta name="description" content="通過青果攝像機，可進行全方位現(xiàn)場直播。"/>
<meta name="author" content="yangdaidi"/>
- 開啟響應式視窗
<!-- 視窗大小等于設備大小，初始大小為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">
- 設置safari書簽以及主屏幕圖標
<!-- 應用圖標漸變 -->
<link rel="apple-touch-icon-precomposed" href="./icon.png">
<!-- 不應用圖標漸變 -->
<link rel="apple-touch-icon" href="./icon.png">
- 開啟iphone上webapp支持(將網(wǎng)頁保存到iphone桌面)
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 刪除默認的瀏覽器地址欄和工具欄（以app模式打開，否則以瀏覽器模式）,如果沒有自帶返回鍵，建議使用瀏覽器模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<!-- 頂欄為white，網(wǎng)上查到還可以選為 black 和 black-translucent，自測IOS9.0以后這兩種顏色已經(jīng)失效 -->
- 設置safari書簽以及主屏幕圖標
<!-- 應用圖標漸變 -->
<link rel="apple-touch-icon-precomposed" href="./icon.png">
<!-- 不應用圖標漸變 -->
<link rel="apple-touch-icon" href="./icon.png">
<!-- 不同屏幕分辨率下需引入單獨圖標 -->
<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;
}
- 禁止觸摸點擊陰影
class{
-webkit-tap-highlight-color: transparent;
}
- 禁止輸入框瀏覽器默認行為
class{
-webkit-appearance:none;
}
- 禁止長按彈出列表欄
class{
-webkit-touch-callout:none;
}
- 阻止移動設備字體自動進行大小調(diào)整
<!-- 1、該屬性只在移動設備上生效； 2、如果你的頁面沒有定義meta viewport，此屬性定義將無效 -->
class{
-webkit-text-size-adjust:none;
}
三、CSS常用小技巧（PC端也適用）：
- 解決ineline-block相鄰元素之間3px間距的問題
父元素上增加CSS：font-size:0
- div比被其包裹的img多出3px
需要把img設置為block
//原因：img是一種類似text的元素，在結(jié)束的時候，會在末尾加上一個空白符，所以就會多出3px
- css 動畫硬件加速（hack）
//CSS動畫不會默認開啟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以外，其它幾點目前實現(xiàn)不是很好，不建議使用 -->
scroll.jpg
- 隱藏滾動條
.element::-webkit-scrollbar {display:none;} 建議不要使用，會造成滑動卡頓，可以用下面的替代
.element::-webkit-scrollbar {width:0;}
<!-- width:0在安卓上可以去除滾動條，IOS滑動過程中會出現(xiàn)，停止后滾動條消失，也會偶現(xiàn)滾動過程中不出現(xiàn)滾動條的情況 -->
- 滾動條位置控制
1、通過設置element.scrollLeft控制，如ul.scrollLeft=200，單位為px(不用添加)
2、可用于將導航滾動條的選擇li定位到正中
ul.scrollLeft = li.offsetLeft - screen.width/ 2 + li.style.width/2;
五、video標簽
- webview中視頻小窗口播放
在video標簽里加入webkit-playsinline屬性即可(前提是webview允許，否則設置無效)
六、autio標簽
- ios中音頻文件無法自動播放
1、微信中禁止音視頻自動播放
2、...
| 內(nèi)核 | 播放器特征 | Unicode 應用代表 |
|---|---|---|
| 原生webkit | 1、在較高ios版本中支持WebView小窗口播放，在非WebView中只能全屏播放2、正常獲取播放器播放狀態(tài)3、可正常獲取播放器網(wǎng)絡狀態(tài)4、更改播放器靜態(tài)寬高比會造成其顯示紊亂 | safari、chrome、微信、QQ、易信、微博 |
| UCBrowser | 1、不能獲取播放器播放狀態(tài)2、可正常獲取播放器網(wǎng)絡狀態(tài)3、默認全屏播放，可以小窗口播放 | UCBrowser |
| QQBrowser X5 | 1、可正常獲取播放器播放狀態(tài)2、可正常獲取播放器網(wǎng)絡狀態(tài)3、播放器的CSS樣式定位紊亂4、可以小窗口播放 | QQBrowser、部分版本QQ |
七、字體編碼
寫css時，通常需要設置字體名稱,我們可以直接寫中文,但是文件編碼為GB2312、UTF-8等不匹配將會出現(xiàn)亂碼。因此將中文字體名稱轉(zhuǎn)為unicode編碼來避免出現(xiàn)這些錯誤。常見的中文字符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 |
| 華文細黑 | STXihei | 534e65877ec69ed1 |
| 細明體 | MingLiU | 7ec6660e4f53 |
| 新細明體 | PMingLiU | 65b07ec6660e4f53 |
八、圖片資源的加載
- 在網(wǎng)頁中引入圖片資源:
在該元素上無論添加 display:none; 或者 visibility:hidden; 都會對圖片資源發(fā)起請求使用<img>標簽或者是CSS中的background-image 相同 - 使用CSS中的background-image引入圖片:
在其父元素上添visibility:hidden; 仍然會對圖片發(fā)起請求，但是若使用 display:none; 就不會發(fā)起請求了 - 使用<img>標簽引入圖片
在元素上或者是在其父元素上，無論添加 display:none; 或者 visibility:hidden; 仍然會對圖片資源發(fā)起請求
未完待續(xù)。。。
