1. 基础 Meta 基础知识:
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- width 设置viewport宽度,为一个正整数,或字符串‘device-width’ -->
<!-- height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置 -->
<!-- initial-scale 默认缩放比例,为一个数字,可以带小数 -->
<!-- minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数 -->
<!-- maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数 -->
<!-- user-scalable 是否允许手动缩放 -->
可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果)
<meta name="apple-mobile-web-app-capable" content="yes" />
仅针对IOS的Safari顶端状态条的样式(可选default/black/black-translucent )
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="telephone=no, email=no" />
其他meta知识
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
a 标签的 href 属性的妙用 ==》打电话、发短信、写邮件:
- 打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
- 发短信,winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
- 写邮件(注:在添加这些功能时,第一个功能以"?“开头,后面的以”&"开头 )
<!-- 1.普通邮件 -->
<a href="mailto:863139978@qq.com">点击我发邮件</a>
<!-- 2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)-->
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a>
<!-- 3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题)-->
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a>
<!-- 4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址 -->
<a href="mailto:863139978@qq.com;384900096@qq.com">点击我发邮件</a>
<!-- 5.包含主题,用?subject= -->
<a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a>
<!-- 6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行 -->
<a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
<!-- 7.内容包含链接,含http(s):等的文本自动转化为链接 -->
<a href="mailto:863139978@qq.com?body=http:<!-- www.baidu.com">点击我发邮件</a>
<!-- 8.内容包含图片(PC不支持)-->
<a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>
页面通用模板如下:
<!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>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
这里开始内容
</body>
</html>
2. 使用 rem 作为单位:
了解 CSS 的各种单位
em
:em是一个相对的度量单位,对于浏览器来说,1em=16px,16px为浏览器的默认字体大小。父级的字体大小为font-size: 2em
,即:32px。若此时,子元素的font-size: 2em
,即:64px。em单位为一个相对的度量单位,它通过寻找父标签的font-size
,然后通过计算得出自身的font-size
。rem
:根节点html
的font-size
决定了rem
的尺寸,也就是说它是一个相对单位,相对于html
。浏览器的默认的font-size
是16px,1rem默认就等于16px。%
:以父级的宽度为基准。如父级width: 200px
,则子级width:50%
为width:100px
vw和vh
:视口单位中的“视口”,桌面端指的是浏览器的可视区域,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vw等于视口宽度的1%。1vh等于视口高度的1%。vmin和vmax
:vmin
为当前vw
和vh
中较小的一个值;vmax
为较大的一个值。例如视口宽度375px
,视口高度812px
,则100vmin = 375px
,100vmax = 812px
1. 人工适配
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }
给手机设置100px的字体大小; 对于320px的手机匹配是100px,其他手机都是等比例匹配;
因此设计稿上是多少像素的话,那么转换为rem的时候,rem = 设计稿的像素/100 即可。
2. fontSize.js
页面开头动态计算 font-size
(1rem = 16px)
(function() {
// document.documentElement:获取document的根元素
var html = document.documentElement
function onWindowResize() {
// html.getBoundingClientRect().width:获取html的宽度(窗口的宽度)
html.style.fontSize = html.getBoundingClientRect().width / 16 + 'px'
}
// 监听window的resize事件
window.addEventListener('resize', onWindowResize)
onWindowResize()
})()
3. 禁用a,button,input,select,textarea等标签背景变暗
移动端使用a标签做按钮的时候或者文字连接的时候,点击按钮会出现一个 "暗色的"背景,比如如下代码:
<a href="">button1</a>
<input type="button" value="提交"/>
在移动端点击后 会出现"暗色"的背景,这时候我们需要在css加入如下代码即可:
a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
4. 移动端IOS手机下清除输入框内阴影
input,textarea {
-webkit-appearance: none;
}
5. 在IOS中 禁止长按链接与图片弹出菜单
a, img {
-webkit-touch-callout: none;
}
6. calc基本语法
.class {
width: calc(expression);
}
- 支持使用 “+”,”-“,”*” 和 “/” 四则运算。
- 可以混合使用百分比(%), px, em, rem等作为单位可进行计算。
.calc{
margin-left:50px;
padding-left:2rem;
width:calc(100%-50px-2rem);
height:10rem;
}
7. 移动端 Click 事件产生 200-300ms 延迟
移动设备上的web网页是有300ms延迟的,可能会造成按钮点击延迟甚至是点击失效。
事件响应顺序
ontouchstart > ontouchmove > ontouchend > onclick
解决方案:
fastclick
可以解决在手机上点击事件的 300ms 延迟zepto
的touch
模块,tap
事件也是为了解决在click
的延迟问题
8. 移动端适配 1px 的问题
Retina 显示屏比普通的屏幕有着更高的分辨率,所以在移动端的 1px 边框就会看起来比较粗,为了美观通常需要把这个线条细化处理。
.scale-1px-bottom {
position: relative;
border:none;
}
.scale-1px-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
同时设置 4 条边框:
.scale-1px {
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
9. 屏幕旋转及重力感应事件
屏幕旋转:
function orientScreen() {
let orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight ? 'landscape' : 'portrait';
if (orientChk == 'lapdscape') {
//这里是横屏下需要执行的事件
} else {
//这里是竖屏下需要执行的事件
}
}
orientScreen();
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', function () {
setTimeout(orientScreen, 100);
}, false)
/* 竖屏时样式 */
@media all and (orientation:portrait) {}
/* 横屏时样式 */
@media all and (orientation:landscape) {}
重力感应事件:
// 运用HTML5的deviceMotion,调用重力感应事件
if (window.DeviceMotionEvent) {
document.addEventListener('devicemotion', deviceMotionHandler, false)
}
let speed = 30;
let x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
let acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed) {
//这里是摇动后要执行的方法
fnHander();
}
lastX = x;
lastY = y;
lastZ = z;
}
function fnHander() {
//do something
}