简体   繁体   English

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

[英]How to set the fixed width and height of a webpage to the maximum width and height of the screen in use?

I want to set a fixed width for my webpage so that users can scroll when they resize their browsers, but I want the maximum size of the page to be the user's maximum screen size (so there are no white spaces if they use a large screen, or so they wouldn't have to scroll immediately if they use a small screen). 我想为我的网页设置一个固定的宽度,以便用户在调整浏览器大小时可以滚动,但是我希望页面的最大尺寸是用户的最大屏幕尺寸(因此,如果使用大屏幕,则不能有空格) ,因此,如果使用小屏幕,则无需立即滚动)。

I tried using Javascript to create functions that returns the screen width and height, but it seems that it isn't possible to call these functions as the width and height of the page. 我尝试使用Javascript创建返回屏幕宽度和高度的函数,但是似乎无法将这些函数称为页面的宽度和高度。

What I have right now: 我现在所拥有的:

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

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

Calling the getScreenWidth() function into the width of the body doesn't seem to be working. 在主体的宽度中调用getScreenWidth()函数似乎不起作用。

You can use css properties in new browsers and the units vh and vw which are viewport height and width. 您可以在新的浏览器中使用css属性,以及视口高度和宽度的单位vhvw Thus you can use something like 因此,您可以使用类似

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

where we include the min-{width,height} attributes for legacy browsers which do not support vw, vh . 其中,我们为不支持vw, vh旧版浏览器添加了min-{width,height}属性。 If you do not want the use to be able to scroll you could also include overflow: hidden as an attribute. 如果您不希望用户滚动使用,则还可以包含overflow: hidden作为属性overflow: hidden

Oh! 哦! I was unaware about width:100vw option but that is good since that is only CSS. 我不知道width:100vw选项,但这很好,因为那只是CSS。

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

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

You can use Viewport Units to set sizes relative to the viewport width and height. 您可以使用视口单位来设置相对于视口宽度和高度的尺寸。 So, for example, "max-width:100vw;" 因此,例如,“ max-width:100vw;” sets an element's maximum width to the width of the viewport. 将元素的最大宽度设置为视口的宽度。

You can use the below: 您可以使用以下内容:

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

Fennec 1.1 (Firefox for mobile) also adds support for minimum-scale , maximum-scale , and user-scalable , with defaults and limits similar to Safari's. Fennec 1.1(移动版Firefox)还增加了对minimum-scalemaximum-scaleuser-scalable ,其默认值和限制与Safari相似。 These properties affect the initial scale and width , as well as limiting changes in zoom level. 这些属性会影响initial scalewidth ,并限制缩放级别的变化。

Just to clarify things even more, in iPhone and iPad devices, the device-width always corresponds to the width of the device in portrait mode, regardless of whether the device is in that mode or landscape instead. 为了进一步说明问题,在iPhone和iPad设备中,设备宽度始终与纵向模式下的设备宽度相对应,而与设备处于该模式还是横向模式无关。 With other devices, its device-width changes depending on its orientation. 对于其他设备,其设备宽度会根据其方向而变化。

Further you can control the rendering using CSS media queries for different devices. 此外,您可以使用CSS媒体查询针对不同设备控制渲染。 Lets see some more CSS media queries now that capture different devices and screen dimensions: 现在让我们看更多的CSS media queries ,它们捕获了不同的设备和屏幕尺寸:

/* #### 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 */
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM