无法将我的网页缩放到适合移动广告的

Question

我有一个页面，其中所有内容都在固定div中（使用Skrollr脚本），我无法正确缩放所有设备大小。

我已经通过视口设置摆弄死了，我可以让它看起来正确的iPhone肖像，但然后我旋转到横向，它被裁剪到屏幕上的页面的1/3等等。

我只是希望它适合屏幕（宽度和高度），两侧，顶部和底部有一点空间，但不适合iPhone和iPad屏幕上的小尺寸。

我当前的视口设置：

<meta name="viewport" content="initial-scale=.35"> 

我还有一个包装器div，它可以垂直和水平地对齐所有内容，这可能是相关的：

.wrapper{
    width: 1000px;
    height: 755px;
    position: fixed;
    margin: auto;
    top:50%;
    left:0px;
    right:0px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

网页网址为www.studio-element.com/comptia/infographic.html