2013-10-25 187 views
0

我有一个网站,我想要遵循浏览器窗口的大小调整,以便它始终适合。 我试着用当前窗口宽度除以全屏窗口宽度给出的比率来使用css transform scale属性。 它确实重新缩放,但一定会出现问题,因为它会在内容的左侧和右侧留下白色块(因此它会缩小网站太多,然后居中放置在窗口中) 以下是JavaScript代码:将网页调整为适合屏幕

$(window).resize(function(){ 
      var ratio = $(window).width()/1340; 
       $('body').css('transform','scale('+(ratio)+')'); 
       $('body').css('-ms-transform','scale('+(ratio)+')'); 
       $('body').css('-moz-transform','scale('+(ratio)+')'); 
       $('body').css('-webkit-transform','scale('+(ratio)+')'); 
    }); 

有没有更好的方法来使页面适合窗口(或正确缩放比例)?

+1

是...使用媒体查询。 –

+0

你有没有考虑过使用全屏API? – Gaurav

+0

使用媒体查询将意味着重新调整整个样式,并且全屏API仍然是实验性的。我只想知道我是否可以使用这个特殊技巧来给我一个正确的结果。 – user1507558

回答

0

你可以利用这一点,把整个内容里面

#wrapper{ 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    overflow:hidden; 
} 
1

为了使您的网站的移动友好的,你真的应该想想使其使用响应媒体查询或使用像引导,基金会等

一些前端框架,或者,如果你只是想扩展您的网站,所以它不应该横向缩放并适合用户的屏幕(无论您的UI组件变得多小)您可以通过在头部添加以下元标记来实现这一点。

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

它会强制浏览器保持足够的网站以适应移动屏幕宽度。

希望它会有所帮助。

0

使用

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
在HTML头中

@media only screen and 
(min-device-width : screen px) and 
(max-device-width : screen px) { 
    #id{style} 
} 
在CSS