问题

由于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>>

是不是很简单？