javascript - 如何将网页的固定宽高设置为所用屏幕的最大宽高?

标签 javascript jquery css html

我想为我的网页设置一个固定宽度,以便用户在调整浏览器大小时可以滚动,但我希望页面的最大尺寸是用户的最大屏幕尺寸(因此如果他们使用,则没有空格大屏幕,这样他们在使用小屏幕时就不必立即滚动)。

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

我现在拥有的:

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

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

调用 getScreenWidth() 函数进入 body 的宽度似乎不起作用。

最佳答案

您可以在新浏览器中使用 css 属性,单位 vhvw 是视口(viewport)高度和宽度。因此你可以使用类似的东西

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

我们为不支持 vw, vh 的旧版浏览器添加了 min-{width,height} 属性。如果您不希望使用能够滚动,您还可以将 overflow: hidden 作为属性包含在内。

关于javascript - 如何将网页的固定宽高设置为所用屏幕的最大宽高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39043577/

相关文章:

javascript - 通过升级保存 HTML5 Canvas

javascript - 图片上方的半透明div

html - Bootstrap img 响应类无法正常工作

javascript - Ruby on Rails,javascript 冲突

javascript - 如何在 html 表格中显示 php 响应的数据

javascript - Angular 不从工厂获取数据

php - 跟踪用户在页面上停留的时间?

css - 在 Html5 中将 <h1> 与 <nav> 对齐

html - iframe中body的高度与iframe相同

javascript - EventListener 存储在哪里?