Fork me on GitHub

移动端总结

css部分

meta标签

viewport

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。

IOS中safari允许全屏浏览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
```
### IOS中Safari顶端状态条样式
`<meta name="apple-mobile-web-app-status-bar-style" content="black">`
PS:如果要去除全部的,就把default :状态栏背景是白色。
black :状态栏背景是黑色。
black-translucent :状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。
如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
### 忽略将数字变为电话号码
`<meta name="format-detection" content="telephone=no">`
### 忽略识别email
`<meta name="format-detection" content="email=no" >`
### 添加到主屏后的标题(IOS)
`<meta name="apple-mobile-web-app-title" content="标题">`
### 百度禁止转码
`<meta http-equiv="Cache-Control" content="no-siteapp" />`
### 优先使用最新版本 IE 和 Chrome
`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />`
### 设置缓存
`<meta http-equiv="Cache-Control" content="no-cache" />`
## 小技巧
### select 下拉选择设置右对齐

select option {
direction: rtl;
}

1
2
3
###	消除 IE10 里面的那个叉号
`input:-ms-clear{display:none;}`
### 关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

1
2
3
4
5
6
###	关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
可以通过正则去掉
`this.value = this.value.replace(/\u2006/g, '');`
### 移动端 HTML5 input date 不支持 placeholder 问题
`<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">`
### 部分机型存在type为search的input,自带close按钮样式修改方法

#Search::-webkit-search-cancel-button{
display: none;
}

1
###	开启电话功能和短信和发邮件

123456
123456
<a mailto:dooyoe@gmail.com“>dooyoe@gmail.com

1
2
3
4
5
6
7
8
9
###	IOS Web app启动动画
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
(landscape:横屏 | portrait:竖屏)
### 添加到主屏后的APP图标



1
###	去除webkit的滚动条

element::-webkit-scrollbar{
display: none;
}

1
2
3
4
5
6
PS:如果要去除全部的,就把 element去掉。
添加这个属性滚动如丝般顺滑: -webkit-overflow-scrolling : touch;
### 去除button在ios上的默认样式
```
-webkit-appearance: none;
border-radius: 0;

长时间按住页面出现闪退

1
2
3
element {
-webkit-touch-callout: none;
}

Retina屏的1px边框

1
2
3
element{
border-width: thin;
}

transition闪屏

1
2
3
4
/设置内嵌的元素在 3D 空间如何呈现:保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /
-webkit-backface-visibility:hidden;

旋转屏幕时,字体大小调整的问题

1
2
3
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}

placeholder元素样式的修改

1
2
input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

不想让按钮 touch时有蓝色的边框或半透明灰色遮罩

对于a,button,input,textarea
-webkit-tap-highlight-color:rgba(0,0,0,0);

移动端做动画效果采用css3

transition、transform(scale、translate、rotate、skew)或者 animation
动画尽量少用margin、top等集合属性,因为这样会触发浏览器重排(reflow)

使用图片时去除图片下4px的空白

1
2
img{display:block};
img{vertical-align:top}

如何禁止保存或拷贝图像(IOS)

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

手机拍照和上传图片

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

弹性盒子的过渡

1
2
3
display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 过渡版本
display:-webkit-flex; // 最新的版本

禁止用户选中文字

-webkit-user-select:none;

定义新的盒模型

box-sizing:border-box

css权重(逐次降低)

style--1000
!important
id--100
class--10
标签--1

使用rem

1
2
3
4
5
6
7
8
9
10
11
html {
font-size: 625%; // 相当于 12px *6.25 = 100px
}
以后的元素的width、height、padding等集合属性都可以用rem来表示。
```
### 移动端字体
`font-family: Helvetica,sans-serif;`
### iphone原生键盘统计字数时
在 iphone原生键盘上用 keyup统计字符数时,系统不会自动监控你选择文字的事件,应该使用input事件。
### 毛玻璃效果
实现毛玻璃效果,透过背景看其他元素模糊,自身元素不模糊。

-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.5);

1
2
3
###	需要展示小于12px的文字
`transform:scale(%);`
### 禁止IOS弹出各种操作窗口及关闭自动大写与自动修正

-webkit-touch-callout:none


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
###	Andriod 上去掉语音输入按钮
`input::-webkit-input-speech-button {display: none}`
# js部分
## 移动端事件
click事件有300ms的延迟
### 触摸事件touch类事件
touchstart:手指触摸到屏幕会触发
touchmove:当手指在屏幕上移动时,会触发
touchend:当手指离开屏幕时,会触发
touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件
### 敲击事件tap类事件
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
### swipe类事件
swipe:手指在屏幕上滑动时会触发
swipeLeft:手指在屏幕上向左滑动时会触发
swipeRight:手指在屏幕上向右滑动时会触发
swipeUp:手指在屏幕上向上滑动时会触发
swipeDown:手指在屏幕上向下滑动时会触发
### 旋转屏幕事件
`onorientationchange`
### audio、video默认播放事件
window.onload或计时器等都不能触发播放,必须用 JS写事件让用户手动点击触发才会开始播放

$(document).one(‘touchstart’,function(){
audio.play();
})
`

移动事件三方库

Hammer.JS
FastClick

参考文档:
移动端前端常见的触摸相关事件touch、tap、swipe等整理
web前端 —— 移动端知识的一些总结
移动端事件介绍
移动端web开发技巧
瀑布流框架
倾力总结40条常见的移动端Web页面问题解决方案

-------------本文结束感谢您的阅读,如果本文对你有帮助就记得给个star-------------
Donate comment here