问题
由于ionic2/3项目大部分是要在手机上运行的，而web排版看起来又不太美观，看起来像这样：
QQ截图20171025100926.png
超大的排版令人窒息。。。。
当用户浏览你的在线页面时，你肯定不希望他们看到这样的页面(F12并不是人人都会的)
怎么解决呢？先放图：
Paste_Image.png
这样是不是美观多了？而且看起来高大上的样子！
原理
其实很简单，在某一个页面(例如a.html)中将你的编译好的页面(www/index.html)以iframe的形式引入，将a.html <section>的背景图片设置为手机外壳图片。
a.html
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loly</title>
<style>
body{
background-color: whitesmoke;
}
#phone{
background:url(src/assets/img/background/phone_white.png) center center no-repeat;
background-size: cover;
height:800px;
width:500px;
margin: 0 auto;
position: relative;
}
iframe{
position: absolute;
top:93px;
left:78px;
width:346px;
height:614px
}
</style>
</head>
<body>
<section id='phone'>
<iframe src="www/index.html" frameborder="0" seamless></iframe>
</section>
</body>
</html>>
是不是很简单？
结语
大功告成！想关注我进一步动态的可以关注我的Github，感谢
网友评论