Javascript 如何将网页的固定宽度和高度设置为使用中屏幕的最大宽度和高度？_Javascript_Jquery_Html_Css_Webpage

Javascript 如何将网页的固定宽度和高度设置为使用中屏幕的最大宽度和高度？

javascript jquery html css

Javascript 如何将网页的固定宽度和高度设置为使用中屏幕的最大宽度和高度？,javascript,jquery,html,css,webpage,Javascript,Jquery,Html,Css,Webpage,我想为我的网页设置一个固定的宽度，以便用户在调整浏览器大小时可以滚动，但我希望页面的最大大小是用户的最大屏幕大小（这样，如果他们使用大屏幕，就不会有空白，或者如果他们使用小屏幕，就不必立即滚动）我尝试使用Javascript创建返回屏幕宽度和高度的函数，但似乎无法将这些函数作为页面的宽度和高度调用我现在所拥有的： <script> function getScreenWidth() { return screen.width; } func

我想为我的网页设置一个固定的宽度，以便用户在调整浏览器大小时可以滚动，但我希望页面的最大大小是用户的最大屏幕大小（这样，如果他们使用大屏幕，就不会有空白，或者如果他们使用小屏幕，就不必立即滚动）

我尝试使用Javascript创建返回屏幕宽度和高度的函数，但似乎无法将这些函数作为页面的宽度和高度调用

我现在所拥有的：

<script>
    function getScreenWidth() {
        return screen.width;
    }
    function getScreenHeight() {
        return screen.height;
    }
 </script>

 <body width="getScreenWidth()">
  ...
 </body>


函数getScreenWidth（）{
返回屏幕宽度；
}
函数getScreenHeight（）{
返回屏幕高度；
}
...

在正文的宽度中调用getScreenWidth（）函数似乎不起作用。

哦！我不知道宽度：100vw，但这是好的，因为这只是CSS

<script>
    function setWH() {
        $('body').css('width': $( window ).width() + 'px');
        $('body').css('height': $( window ).height() + 'px');
    }
 </script>

 <body onload="setWH()">
  ...
 </body>


函数setWH（）{
$（'body'）.css（'width'：$（window.width（）+'px'）；
$（'body'）.css（'height'：$（window.height（）+'px'）；
}
...

您可以使用视口单位设置相对于视口宽度和高度的大小。例如，“max width:100vw；”将元素的最大宽度设置为视口的宽度

您可以在新浏览器中使用css属性和单位

vh

和

vw

，它们是视口高度和宽度。因此，您可以使用

body {
    width: 100vw;
    min-width: 100%;
    height: 100vh;
    min-height: 100%;
}

其中，我们为不支持

vw，vh

的传统浏览器包括

min-{width，height}

属性。如果您不希望使用能够滚动，您还可以将

溢出：隐藏作为属性
 您可以使用以下选项：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

我真的不明白你想做什么。设置高度：100%是否有原因；宽度：100%
在CSS中对你不起作用？是的，罗里说的。如果这不起作用，您可以始终指定：body{width:100vw；height:100vh；}
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}