javascript 调整网页大小以适合屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19598836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize web page to fit screen
提问by user1507558
I have a website which I want to follow the resizing of the browser window so that it always fits. I tried using css transform scale property with a ratio given by current window width divided by full-screen window width. It does re-scale but there must be something wrong with it because it leaves white blocks to the left and the right of the content (so it shrinks the site too much and then centers in in the window) Here is the javascript code:
我有一个网站，我想跟随浏览器窗口的大小调整，使其始终适合。我尝试使用 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)+')');
});
Is there a better way to make the page fit the window (or make the scaling scale properly)?
有没有更好的方法使页面适合窗口（或正确缩放）？
采纳答案by Ryan Brackett
What you're wanting to do is build the website using Responsive and Adaptive methods. See if this link helps! http://www.imediaconnection.com/content/33435.asp#singleview
您想要做的是使用响应式和自适应方法构建网站。看看这个链接有没有帮助！http://www.imediaconnection.com/content/33435.asp#singleview
回答by Janmejay Agrawal
To make your website mobile friendly, you should really think about making it responsive using media queries or using some front-end framework like Bootstrap, Foundation etc.
为了使您的网站对移动设备友好，您应该真正考虑使用媒体查询或使用一些前端框架（如 Bootstrap、Foundation 等）使其响应。
Or if you just want to scale your website so it should not horizontally scale and fit to user's screen (No matter how small your UI component become) You can do that by adding following meta tag in your head section.
或者，如果您只想缩放您的网站，使其不应该水平缩放并适合用户的屏幕（无论您的 UI 组件变得多小），您可以通过在 head 部分添加以下元标记来实现。
<meta name="viewport" content="width=device-width, initial-scale=1">
It'll force browser to keep the website scale enough to fit the mobile screen width.
它将强制浏览器保持网站规模足以适应移动屏幕宽度。
Hope It'll help.
希望它会有所帮助。
回答by sundeep sharma
Use
利用
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in Html head section and
在 Html 头部部分和
@media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
#id{style}
}
in CSS.
在 CSS 中。
回答by Sobin Augustine
you can use this, put the whole content inside it
你可以用这个，把整个内容放在里面
#wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
