如何将整个网页缩小到ipad或手机尺寸

我对响应式CSS设计相当陌生，而且我无法获得一个非常简单的工作。我有一个约1200px宽的DIV。我希望此div在iPad或智能手机上查看时缩小到最大屏幕尺寸。如何将整个网页缩小到ipad或手机尺寸

例如，当您访问智能手机上的非响应式网站时，您会看到整个网站缩小到电话屏幕上的一个小尺寸。这实际上是不响应，但不知何故，我不能重现降比效果：

我的div：

<div id="app"> 
    <div id="screen">This is my screen</div> 
</div>

我的CSS：

html,body { 
    margin:0px; 
    padding:0px; 
} 
#app { 
    width:1200px; 
    height:800px; 
    background-color:#CCCCCC; 
    overflow:auto; 
} 
#screen { 
    width:800px; 
    height:400px; 
    margin: 0 auto; 
    background-color:#ABABAB; 
} 

/* this is only for large screens: scale the background up to fill the entire screen */ 
@media only screen and (min-width : 1200px) { 
    #app { 
     width:100%; 
     height:100%; 
     background-color:#999999; 
    } 
}

JSFiddle这里。如何在小屏幕上显示缩小的div？

来源

2014-02-19 Kokodoko

请不要让可怜的移动用户下载一张1200像素x 800像素的图像，如果有的话 – Leo

我知道这并不理想，但我真正需要的只是将网站缩小一点点，所以它非常适合iPad屏幕。 1200像素仅比iPad的1024像素稍大。 – Kokodoko

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>

这会给你你想要的扩展。

来源

2014-02-19 14:15:35 Lauren

这似乎没有做任何事情。我上传了一个文件到我的测试服务器：http://www.nightoferror.nl/test/如果我在iPad上打开它，主屏幕对于屏幕来说仍然太大。 – Kokodoko

尝试向meta添加maximum-scale = 1，这将停止用户缩放，但它可能会自动缩放，因此看起来不太合适。 – Lauren

如何将整个网页缩小到ipad或手机尺寸

回答

相关问题