移动web前端开发—CSS篇

一、<meta> 标签提供了有关页面的元信息，例如作者、日期和时间、网页描述、关键词等，除了SEO，在移动端浏览器中它还有着更多的功能：

1. 作者、日期和时间、网页描述、关键词等

<meta name="baidu-site-verification" content="v7UEg8ALz5" />
<meta name="keywords" content="直播、现场直播、摄像机"/>
<meta name="description" content="通过青果摄像机，可进行全方位现场直播。"/>
<meta name="author" content="yangdaidi"/>

2. 开启响应式视窗

<!-- 视窗大小等于设备大小，初始大小为1.0，不允许用户缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

3. 忽略电话号码与邮箱的识别

<!-- 忽略电话号码的识别 -->
<meta name="format-detection" content="telephone=no"> 
<!-- 忽略邮箱的识别 -->
<meta name="format-detection" content="email=no">

4. 设置safari书签以及主屏幕图标

<!-- 应用图标渐变 -->
<link rel="apple-touch-icon-precomposed" href="./icon.png">
<!-- 不应用图标渐变 -->
<link rel="apple-touch-icon" href="./icon.png">

5. 开启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以后这两种颜色已经失效 -->

6. 设置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常用小技巧：

1. 禁止长按文本选中

class{
     -webkit-user-select:none;
             user-select:none;
}

2. 禁止触摸点击阴影

class{
     -webkit-tap-highlight-color: transparent;
}

3. 禁止输入框浏览器默认行为

class{
     -webkit-appearance:none;
}

4. 禁止长按弹出列表栏

class{
     -webkit-touch-callout:none;
}

5. 阻止移动设备字体自动进行大小调整

<!-- 1、该属性只在移动设备上生效； 2、如果你的页面没有定义meta viewport，此属性定义将无效 -->
class{
      -webkit-text-size-adjust:none; 
}

三、CSS常用小技巧（PC端也适用）：

1. 解决ineline-block相邻元素之间3px间距的问题

父元素上增加CSS：font-size:0

2. div比被其包裹的img多出3px

需要把img设置为block
//原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px

3. 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都支持硬件加速
}

4. 一行与任意行文本，溢出部分显示 省略号（...）

<!-- 单行文本 --> 
.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;
}

四、滚动条

1. 开启滚动条

.element{
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

2. 自定义滚动条样式

.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

3. 隐藏滚动条

.element::-webkit-scrollbar {display:none;}   建议不要使用，会造成滑动卡顿，可以用下面的替代
.element::-webkit-scrollbar {width:0;}
<!-- width:0在安卓上可以去除滚动条，IOS滑动过程中会出现，停止后滚动条消失，也会偶现滚动过程中不出现滚动条的情况 --> 

4. 滚动条位置控制

1、通过设置element.scrollLeft控制，如ul.scrollLeft=200，单位为px(不用添加)
2、可用于将导航滚动条的选择li定位到正中
     ul.scrollLeft = li.offsetLeft - screen.width/ 2 + li.style.width/2;

五、video标签

1. webview中视频小窗口播放

在video标签里加入webkit-playsinline属性即可(前提是webview允许，否则设置无效)

六、autio标签

1. 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

八、图片资源的加载

1. 在网页中引入图片资源:
   在该元素上无论添加 display:none; 或者 visibility:hidden; 都会对图片资源发起请求使用<img>标签或者是CSS中的background-image 相同
2. 使用CSS中的background-image引入图片:
   在其父元素上添visibility:hidden; 仍然会对图片发起请求，但是若使用 display:none; 就不会发起请求了
3. 使用<img>标签引入图片
   在元素上或者是在其父元素上，无论添加 display:none; 或者 visibility:hidden; 仍然会对图片资源发起请求

未完待续。。。