移动端页面开发资源总结

一、meta标签相关知识

移动端页面设置视口宽度等于设备宽度,并禁止缩放。

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面。

1
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

禁止将页面中的数字识别为电话号码。

1
<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别。

1
<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari.

1
2
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后,safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式。

1
2
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

viewport莫板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
content...
</body>
</html>

二、CSS样式技巧

禁止ios和android用户选中文字。

1
.css{-webkit-user-select:none}

禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片。

1
.css{-webkit-touch-callout: none}

webkit去除表单元素的默认样式。

1
.css{-webkit-appearance:none;}

修改webkit表单输入框placeholder的样式。

1
2
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

去除 android a/button/input 标签被点击时产生的边框 & 去除ios a 标签被点击时产生的半透明灰色背景。

1
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

ios使用-webkit-text-size-adjust禁止调整字体大小。

1
body{-webkit-text-size-adjust: 100%!important;}

android 上去掉语音输入按钮。

1
input::-webkit-input-speech-button {display: none}

移动端定义字体,移动端没有微软雅黑字体。

1
2
3
4
5
6
7
8
9
body{font-family:Helvetica;}
```
#### 禁用Webkit内核浏览器的文字大小调整功能。
``` css
.adjust{
-webkit-text-size-adjust: none;
}

三、其他技巧

手机拍照和上传图片。

1
2
3
4
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

取消input在ios下,输入的时候英文首字母的默认大写。

1
<input autocapitalize="off" autocorrect="off" />

打电话和发短信。

1
2
<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>

四、CSS reset

reset总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@charset "utf-8";
html{
-webkit-text-size-adjust:none;
-webkit-user-select:none;
-webkit-touch-callout: none
font-family: Helvetica;
}
body{font-size:12px;}
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;}
a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;}
em{font-style:normal}
li{list-style:none}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
table{border-collapse:collapse;}
textarea{ resize:none; overflow:auto;}

五、常用公用CSS style

常用公用CSS style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* 清除浮动 */
.clear { zoom:1; }
.clear:after { content:''; display:block; clear:both; }
/* 定义盒模型为怪异和模型(宽高不受边框影响) */
.boxSiz{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
/* 强制换行 */
.toWrap{
word-break: break-all; /* 只对英文起作用,以字母作为换行依据。 */
word-wrap: break-word; /* 只对英文起作用,以单词作为换行依据。*/
white-space: pre-wrap; /* 只对中文起作用,强制换行。*/
}
/* 禁止换行 */
.noWrap{
white-space:nowrap;
}
/* 禁止换行,超出省略号 */
.noWrapEllipsis{
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 设置超出几行显示省略号 */
.multiLineEllipsis{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* 文字两端对齐 */
.text-justify{
text-align:justify;
text-justify:inter-ideograph;
}
/* 定义盒模型为 flex布局兼容写法并让内容水平垂直居中 */
.flex-center{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-o-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-o-box-align: center;
box-align: center;
}

六、flex布局

定义弹性盒模型。

1
2
3
.ub {
display: flex;
}

flex-direction 定义盒模型内伸缩项目的布局方向。

1
2
3
4
5
6
7
8
9
10
.flex-direction{
/**
* row 水平 默认值
* row-reverse 水平 倒序
* column 垂直
* column-reverse 垂直 倒序
*/
flex-direction: column;
}

justify-content 对盒子元素水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 水平居中
.justify-content {
/**
* flex-start | flex-end | center | space-between | space-around
* flex-start:弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。
* flex-end:弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。
* center:弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。
* space-between:弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。
* space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
*/
-webkit-justify-content: center;
justify-content: center;
}

align-items 对盒子元素垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
.flex-end {
/**
* flex-start | flex-end | center | baseline | stretch
* lex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
* flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
* center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
* baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
* stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
*/
-webkit-align-items: center;
align-items: center
}

flex-wrap 自动换行

1
2
3
4
5
6
7
8
9
.flex-wrap {
/**
* nowrap 不换行 flex容器为单行。该情况下flex子项可能会溢出容器
* wrap 自动换行 排列flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
* wrap-reverse 反转 wrap
**/
flex-wrap: wrap;
}