Question

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

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

我现在拥有的：

#With something like this

$xml = simplexml_load_string ($xmlstring);
$result = $xml->xpath('param');

while(list( , $node) = each($result)) {
    echo (string)$node->value[0]->array[0]->data->value[0]->{'string'};#UstId_1
}

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

Answer 1

您可以在新浏览器中使用css属性，并使用视口高度和宽度的单位vh和vw。因此你可以使用像

这样的东西

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

我们在其中包含不支持min-{width,height}的旧版浏览器的vw, vh属性。如果您不希望使用滚动，则还可以包含overflow: hidden作为属性。

Answer 2

哦！我没有意识到width:100vw选项，但这很好，因为那只是CSS。

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

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

Answer 3

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

Answer 4

您可以使用以下内容：

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

Fennec 1.1（适用于移动设备的Firefox）还增加了对minimum-scale，maximum-scale和支持的支持 user-scalable，默认值和限制类似于Safari。这些属性会影响initial scale和width，以及限制缩放级别的变化。

为了进一步说明问题，在iPhone和iPad设备中，设备宽度始终对应于纵向模式下设备的宽度，无论设备是处于该模式还是横向设备。对于其他设备，其设备宽度会根据其方向而变化。

此外，您可以使用CSS媒体查询控制渲染不同的设备。让我们看看更多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 */
}

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

4 个答案: