javascript 如何使网站适应用户的屏幕分辨率？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4779077/
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
How to adapt website to user's Screen Resolution?
提问by Jmlevick
I'm designing my website by using a base of 1024x768 screen resolution. When you're looking at the website in the browser from a computer with a smaller/bigger screen resolution the website starts to deform.
How can I adapt the website to user's screen resolution no matter what screen resolution the user have? I believe it's possible trough JavaScript or CSS, but not sure how...
我正在使用 1024x768 屏幕分辨率的基础设计我的网站。当您从具有较小/较大屏幕分辨率的计算机在浏览器中查看网站时，网站开始变形。
无论用户的屏幕分辨率如何，我如何使网站适应用户的屏幕分辨率？我相信通过 JavaScript 或 CSS 是可能的，但不确定如何......
回答by Rakesh Juyal
The best way to tackle this issue is instead of using pxuse emor % ( percentage ).
解决此问题的最佳方法是使用em或 %（百分比）代替px。
.container {
width: 1000 px;
height: 750 px;
}
.container {
width: 90%;
height: 90%'
}
回答by nss
What you're looking for is the browser "viewport".
您正在寻找的是浏览器“视口”。
This link offers a good overview of how to obtain the viewport: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
此链接很好地概述了如何获取视口：http: //andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
In most standard browsers, you can just reference window.innerWidth and window.innerHeight in JavaScript.
在大多数标准浏览器中，您可以只引用 JavaScript 中的 window.innerWidth 和 window.innerHeight。
If you are using the dojo JavaScript framework, then you can just call dijit.getViewport() which will do the heavy lifting for you.
如果您使用的是 dojo JavaScript 框架，那么您只需调用 dijit.getViewport() 即可为您完成繁重的工作。
Once you have the dimensions of the viewport, it's up to you to decide how your webpage will react to the information it receives from the browser.
获得视口的尺寸后，您就可以决定您的网页如何对从浏览器接收到的信息做出反应。
