Question

此处，网页显示在1349x659浏览器窗口中。（它恰好是图像的尺寸）。身体宽度设置为60％，内容包装精美，易于阅读。

这里我将浏览器窗口的大小调整为478x642。你可以看到60％的身体宽度不再能提供良好的视野。

由于网页可以在服务器甚至不知道的情况下调整大小，因此解决方案必须在客户端。或者在css文件中完成。

我建议这个算法：

如果访客是移动的，那么身体宽度应该是100％而不管其他任何东西。

如果访客不是移动设备（平板电脑，个人电脑......），那么（

如果浏览器窗口的宽度大于高度，则主体宽度将等于窗口高度。

但如果宽度小于高度，则身体宽度为100％。）

这是一个小提琴

https://jsfiddle.net/rawj7vxc/

<body>
Some posts are not public. To access them, please login to your account, or register if you have none yet. By logging in to your account, you're no longer considered a "guest", this has some benefits which come with account promotions. Seeing more posts is one of those benefits. Registered accounts need verification. You'll be told how to this after the first unverified login. The verification will, however, not be immediate.
</body>

body {
background-color: rgb(31,25,0);
width: 60%;
padding: 0;
margin: 0 auto;

font-family: consalos;
text-align: justify;
color: rgb(215,200,0);

overflow: auto;
}

Answer 1

你可以使用像Bootstrap或媒体查询这样的框架：

@media (min-width: 568px) {
  .myDiv{
    width: 550px;
  }
}
@media (min-width: 992px) {
  .myDiv{
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .myDiv{
    width: 1170px;
  }
}

您可以在此处获得更多信息：w3schools.com 还有关于Bootstrap：getbootstrap.com

Answer 2

您需要考虑使用媒体查询。这些将允许您根据屏幕的宽度和高度来满足您的设计。

/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Media Queries

Answer 3

我认为您可以使用元标记视口（see documentation here）

viewport元素为浏览器提供了有关如何操作的说明   控制页面的尺寸和缩放。

width = device-width部分设置要遵循的页面宽度   设备的屏幕宽度（根据设备的不同而不同）。

initial-scale = 1.0部分设置页面的初始缩放级别   首先由浏览器加载。

在string filterstring = ""; filterstring = "Get_RequestsAtEachStage "; cn = new SqlConnection(GetConnectionString()); SqlCommand myCmd = new SqlCommand(filterstring, cn); myCmd.CommandType = CommandType.StoredProcedure; cn.Open(); myCmd.Parameters.AddWithValue("@managerRef", managerRef); myCmd.Parameters.AddWithValue("@status", status); DataTable dt = new DataTable(); dt.Load(myCmd.ExecuteReader()); return dt;部分中，只需添加以下标记：

head

如果您只想在屏幕“宽”时添加<meta name="viewport" content="width=device-width, initial-scale=1">，您可以使用：

width: 60%

请参阅here

我希望它可以帮助你，再见。

Answer 4

好的，这是我的纯javascript解决方案，

document.getElementByTagName("body").onresize=function(){

  var fullwidth=screen.width;
  var fullheight=screen.height;

  if(fullwidth<aval){                     //checking if mobile
     /*
      * make width 100%
      */
  }
  else
  {
        if(fullwidth>fullheight)
             //make width = fullheight
        else
             // make width=100%
  }
}

我只给你了逻辑结构，如果你想要完整的css更改（宽度和高度变化）代码，请在此处提及。

<强> N.B。 aval是屏幕尺寸设备将被视为移动设备的阈值

如何在调整浏览器窗口大小时更改正文宽度，以便轻松读取内容？

4 个答案: