移动端重构

2018-01-16 本文已影响0人豆豆猫1031

目录：
1.新建空白页 meta标签相关
2.整体布局

1.新建空白页 meta标签相关

其他常用meta:

<meta name="renderer" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="HandheldFriendly" content="true">

<meta name="MobileOptimized" content="320">

<meta name="screen-orientation" content="portrait">

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="browsermode" content="application">

<meta name="x5-page-mode" content="app">

<meta name="msapplication-tap-highlight" content="no">

如果apple-mobile-web-app-capable设置为yes了，那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。而通过设置相应apple-touch-icon标签，则添加到主屏上的图标就会使用我们指定的图片。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
图标使用的优先级如下：

如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

同样基于apple-mobile-web-app-capable设置为yes，可以用WebApp设置一个类似NativeApp的启动画面。
<link rel="apple-touch-startup-image" href="/startup.png">

和apple-touch-icon不同，apple-mobile-web-app-capable不支持sizes属性，所以使用media来控制retina和横竖屏加载不同的启动画面。
// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
// iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
// iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
// iPad Retina portrait
<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" />
// iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

总结
空白页面模板，然后再根据具体情况在此基础上添加apple-touch-icon和apple-touch-startup-image
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<title>Document</title>
</head>
<body> </body>
</html>

2.整体布局

fixed布局：
<header class="header fixed-top">
</header>
<div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...
</div>
<footer class="footer fixed-bottom"></footer>

考虑到可滚动的为page内容，所以我们得给wrap-page一个具体的高度，然后使用原生的-webkit-overflow-scrolling:touch;

结构优化（智能识别padding）（兼容性不好高版本）

这样我们就可以采用兄弟选择器，设置上下的padding：

.header ~ .wrap-page {
padding-top: 44px;
}
.footer ~ .wrap-page {
padding-bottom: 44px;
}

.header-sub ~ .wrap-page { padding-top: 88px; } //双层头部写法
所以如果我们采用这种布局，header和footer绝对不能采用显示显示隐藏的方式来搞，而应该采用替换形式，没有则删除。

绝对定位布局

.header,.footer,.wrap-page{
position:absolute;
left:0;
right:0;
}
.header,.footer{
height:44px;
background-color: #fff;
text-align: center;
z-index:900;
line-height:44px;
}
.header{
top: 0;
border-bottom: 1px solid #f00;
}
.footer{
bottom: 0;
border-top: 1px solid #f00;
}
.wrap-page{
top: 44px;
bottom: 44px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.page{
padding: 10px;
}
.page p{
margin-bottom: 10px;
}


这个布局的缺陷在于滚动的时候地址栏不隐藏，safari浏览器可以通过下面js代码来隐藏地址栏，其他浏览器经测试不可以

window.addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});


flex 布局

body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}

.wrap-page {
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}

.header,.footer{
height:44px;
background-color: #fff;
text-align: center;
line-height:44px;
position:relative;
z-index:990;
}
.header{
border-bottom: 1px solid #f00;
}
.footer{
border-top: 1px solid #f00;
}
.wrap-page{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.page{
padding: 10px;
}
.page p{
margin-bottom: 10px;
}


## 总结

fixed滑动式有bug flex兼容性不好 所以一般用绝对布局

移动端重构

猜你喜欢

热点阅读