直接上代码

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
26
/*
*@param design Number 设计尺寸 默认640
*@param selectors string dom节点
**/
(function(design, selectors){
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
//缩放比例
var scale = width / design;
var style = '<style type="text/css">\n';
for(var i = 0; i < selectors.length; i++){
    style += selectors[i].selector + '{\n'
          + '     -moz-transform-origin: ' + selectors[i].origin + ';\n'
          + '  -webkit-transform-origin: ' + selectors[i].origin + ';\n'
          + '          transform-origin: ' + selectors[i].origin + ';\n'
          + '     -moz-transform: scale(' + scale + ');\n'
          + '  -webkit-transform: scale(' + scale + ');\n'
          + '          transform: scale(' + scale + ');\n'
          + '}\n';
}

style += '</style>\n';

document.open();
document.write(style);
document.close();
})(640, [{"selector": ".popup", "origin": "50% 50% 0"}]);

将这一段代码放置在html头部head标签里面

example :
html代码：

1
2
3
4
5
6
7
<div class="popup">
  <div class="contentParent">
    <div class="closeBtn">
      <img src="" width="100%" height="100%">
    </div>
  </div>
</div>

css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
*{
    padding: 0px;
    margin: 0px;
  }
  .f-popup {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0,0,0,.5);*/
  }
  .f-popup-box {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    overflow:hidden;
    width:556px;
    height:920px;
    margin:-460px 0 0 -278px;
    /*border:1px solid red;*/
    background:url(./contentBg1.png) no-repeat;
  }

一般的做法是 将所需要展示的内容装载在contentParent标签里面，然后里面的内容按照正常的排版即可达到大部分适配

下面在列出个别屏幕通过media screen适配的css代码

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/** ipad / ipad mini **/
  @media screen and (max-height: 1024px) {
      .wrapper{
          -webkit-transform: scale(0.98) translate(-50%, -50%);
                  transform: scale(0.98) translate(-50%, -50%);
      }
  }
  /** nexus 6 **/
  @media screen and (max-height: 960px) {
      .wrapper{
          -webkit-transform: scale(0.92) translate(-50%, -50%);
                  transform: scale(0.92) translate(-50%, -50%);
      }
  }
  /** iphone 6s **/
  @media screen and (max-height: 736px) {
      .wrapper{
          -webkit-transform: scale(0.698) translate(-50%, -50%);
                  transform: scale(0.698) translate(-50%, -50%);
      }
  }
  /** nexus 6 **/
  @media screen and (max-height: 659px) {
      .wrapper{
          -webkit-transform: scale(0.622) translate(-50%, -50%);
                  transform: scale(0.622) translate(-50%, -50%);
      }
  }
  /** iphone 6 **/
  @media screen and (max-height: 627px) {
      .wrapper{
          -webkit-transform: scale(0.59) translate(-50%, -50%);
                  transform: scale(0.59) translate(-50%, -50%);
      }
  }
  /** iphone 5 **/
  @media screen and (max-height: 568px) {
      .wrapper{
          -webkit-transform: scale(0.50) translate(-50%, -50%);
                  transform: scale(0.50) translate(-50%, -50%);
      }
  }
  /** nexus 4 **/
  @media screen and (max-height: 567px) {
      .wrapper{
          -webkit-transform: scale(0.53) translate(-50%, -50%);
                  transform: scale(0.53) translate(-50%, -50%);
      }
  }
  @media screen and (max-height: 533px) {
      .wrapper{
          -webkit-transform: scale(0.49) translate(-50%, -50%);
                  transform: scale(0.49) translate(-50%, -50%);
      }
  }
  /** iphone 4 **/
  @media screen and (max-height: 480px) {
      .wrapper{
          -webkit-transform: scale(0.44) translate(-50%, -50%);
                  transform: scale(0.44) translate(-50%, -50%);
      }
  }