一、<meta> 标签提供了有关页面的元信息，例如作者、日期和时间、网页描述、关键词等，除了SEO，在移动端浏览器中它还有着更多的功能：
- 作者、日期和时间、网页描述、关键词等
<meta name="baidu-site-verification" content="v7UEg8ALz5" />
<meta name="keywords" content="直播、现场直播、摄像机"/>
<meta name="description" content="通过青果摄像机，可进行全方位现场直播。"/>
<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支持(将网页保存到iphone桌面)
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 删除默认的浏览器地址栏和工具栏（以app模式打开，否则以浏览器模式）,如果没有自带返回键，建议使用浏览器模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<!-- 顶栏为white，网上查到还可以选为 black 和 black-translucent，自测IOS9.0以后这两种颜色已经失效 -->
- 设置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;
}
- 阻止移动设备字体自动进行大小调整
<!-- 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的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px
- css 动画硬件加速（hack）
//CSS动画不会默认开启GPU加速，而是由浏览器的软件渲染引擎来执行可以通过一些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;//此处为行数
-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 */} /*窗口大小调整*/
<!-- 除了1以外，其它几点目前实现不是很好，不建议使用 -->
scroll.jpg
- 隐藏滚动条
.element::-webkit-scrollbar {display:none;} 建议不要使用，会造成滑动卡顿，可以用下面的替代
.element::-webkit-scrollbar {width:0;}
<!-- width:0在安卓上可以去除滚动条，IOS滑动过程中会出现，停止后滚动条消失，也会偶现滚动过程中不出现滚动条的情况 -->
- 滚动条位置控制
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、...
| 内核 | 播放器特征 | Unicode 应用代表 |
|---|---|---|
| 原生webkit | 1、在较高ios版本中支持WebView小窗口播放，在非WebView中只能全屏播放2、正常获取播放器播放状态3、可正常获取播放器网络状态4、更改播放器静态宽高比会造成其显示紊乱 | safari、chrome、微信、QQ、易信、微博 |
| UCBrowser | 1、不能获取播放器播放状态2、可正常获取播放器网络状态3、默认全屏播放，可以小窗口播放 | UCBrowser |
| QQBrowser X5 | 1、可正常获取播放器播放状态2、可正常获取播放器网络状态3、播放器的CSS样式定位紊乱4、可以小窗口播放 | QQBrowser、部分版本QQ |
七、字体编码
写css时，通常需要设置字体名称,我们可以直接写中文,但是文件编码为GB2312、UTF-8等不匹配将会出现乱码。因此将中文字体名称转为unicode编码来避免出现这些错误。常见的中文字符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 |
八、图片资源的加载
- 在网页中引入图片资源:
在该元素上无论添加 display:none; 或者 visibility:hidden; 都会对图片资源发起请求使用<img>标签或者是CSS中的background-image 相同 - 使用CSS中的background-image引入图片:
在其父元素上添visibility:hidden; 仍然会对图片发起请求，但是若使用 display:none; 就不会发起请求了 - 使用<img>标签引入图片
在元素上或者是在其父元素上，无论添加 display:none; 或者 visibility:hidden; 仍然会对图片资源发起请求
未完待续。。。
