需要的朋友可以做一下参考,都是一些非常基础的东西。
一.meta标签:
1.控制显示区域各种属性:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">。
width:viewport的宽度。
height:viewport的高度。
initial-scale:初始的缩放比例。
minimum-scale:允许用户缩放到的最小比例。
maximum-scale:允许用户缩放到的最大比例。
user-scalable:用户是否可以手动缩放。
2.IOS中Safari允许全屏浏览:
<meta content="yes" name="apple-mobile-web-app-capable">
3.IOS中Safari顶端状态条样式:
<meta content="black" name="apple-mobile-web-app-status-bar-style">
4.IOS中Safari设置保存到桌面图标:
需要在网站的根目录下存放favicon图标,防止404请求(使用fiddler可以监听到)
<link rel="apple-touch-icon" href="icon.png">
二.取消表单元素在点击态时的边框以及半透明灰色背景:
1
2
3
|
input, textarea, button, a{
-webkit-tap-highlight-
color
:rgba(
0
,
0
,
0
,
0
);
}
|
三.移除原生控件样式:
1
2
3
|
input,button,textarea {
-webkit-appearance:
none
;
}
|
四.使用rem来做响应式开发:
针对不同的设备,对页面rem做不同缩放:
01
02
03
04
05
06
07
08
09
10
11
12
|
html {
font-size
: $baseFontSize;
@media
screen
and (
min-width
:
320px
) {
font-size
: $baseFontSize*.
9
;
}
@media
screen
and (
min-width
:
360px
) {
font-size
: $baseFontSize;
}
@media
screen
and (
min-width
:
400px
) {
font-size
: $baseFontSize*
1.1
;
}
}
|
五.定义字体:
1
2
3
|
body{
font-family
:
Helvetica
;
}
|
六.flex布局兼容性写法:
01
02
03
04
05
06
07
08
09
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
@mixin display-flex() {
display
: -webkit-box;
display
: -webkit-flex;
display
: flex;
}
// 参数:数字,默认:
1
@mixin flex($value:
1
) {
-webkit-box-flex: $value;
-webkit-flex: $value;
flex: $value;
}
// 参数:数字,默认:
1
@mixin order($value:
1
) {
-webkit-box-ordinal-group: $value;
-webkit-order: $value;
order: $value;
}
// 参数:row, row-reverse, column, column-reverse
@mixin flex-direction($direction) {
@if ($direction == row) {
-webkit-box-
direction
:
normal
;
-webkit-box-orient: horizontal;
-webkit-flex-
direction
: row;
flex-
direction
: row;
} @else if ($direction == row-reverse) {
-webkit-box-pack: end;
-webkit-box-
direction
: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-
direction
: row-reverse;
flex-
direction
: row-reverse;
} @else if ($direction == column) {
-webkit-box-
direction
:
normal
;
-webkit-box-orient: vertical;
-webkit-flex-
direction
: column;
flex-
direction
: column;
} @else if ($direction == column-reverse) {
-webkit-box-pack: end;
-webkit-box-
direction
: reverse;
-webkit-box-orient: vertical;
-webkit-flex-
direction
: column-reverse;
flex-
direction
: column-reverse;
}
}
// 参数:flex-start,
center
, flex-end, space-between
@mixin justify-content($value) {
@if ($value == flex-start) {
-webkit-box-pack: start;
-webkit-justify-
content
: flex-start;
justify-
content
: flex-start;
} @else if ($value ==
center
) {
-webkit-box-pack:
center
;
-webkit-justify-
content
:
center
;
justify-
content
:
center
;
} @else if ($value == flex-end) {
-webkit-box-pack: end;
-webkit-justify-
content
: flex-end;
justify-
content
: flex-end;
} @else if ($value == space-between) {
-webkit-box-pack:
justify
;
-webkit-justify-
content
: space-between;
justify-
content
: space-between;
}
}
// 参数:flex-start,
center
, flex-end,
baseline
, stretch
@mixin align-items($value) {
@if ($value == flex-start) {
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
} @else if ($value ==
center
) {
-webkit-box-align:
center
;
-webkit-align-items:
center
;
align-items:
center
;
} @else if ($value == flex-end) {
-webkit-box-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
} @else if ($value ==
baseline
) {
-webkit-box-align:
baseline
;
-webkit-align-items:
baseline
;
align-items:
baseline
;
} @else if ($value == stretch) {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
align-items: stretch;
}
}
|
七.移动端touch事件:
当用户手指放在移动设备在屏幕上滑动会触发的touch事件
touchstart:当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
touchend:当手指离开屏幕时触发
touchcancel:系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用
八.click产生200-300 ms的延迟响应:
页面js捕获click事件的回调函数处理,需要300ms后才生效
解决方案:
1、fastclick可以解决在手机上点击事件的300ms延迟
2、zepto的touch模块,tap事件也是为了解决在click的延迟问题
九.按钮active态:
在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态
1
2
3
|
document.body.addEventListener(
'touchstart'
,
function
() {
//空函数即可
});
|
原文发布时间为:2017-2-23
本文作者:admin
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落
原文链接:HTML5移动端网页常用知识分享