如何在浏览器 window 调整大小时更改正文宽度，以便于阅读内容？

Question

此处，网页在 1349x659 浏览器中显示 window。（这正是图像的尺寸）。正文宽度设置为 60%，内容包装精美，易于阅读。

这里我将浏览器 window 调整为 478x642。并且你可以看到60%的车身宽度不再提供良好的视野。

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

我建议这个算法：

如果访问者是移动的，那么不管其他什么，正文宽度都应该是 100%。

如果访问者不是移动设备（平板电脑、PC 等），则 (

如果浏览器的宽度 window 大于高度，正文宽度将等于 window 高度。

但如果宽度小于高度，则正文宽度为 100%。 )

这是一个fiddle

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

好的，这是我使用纯 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 是屏幕尺寸设备将被视为移动设备的阈值

Answer 2

您可以使用一些框架，例如 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 3

您需要考虑使用媒体查询。这些将使您的设计适合屏幕的宽度和高度。

/* 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 4

我认为您可以使用元标记 viewport (see documentation here)

viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

在您的 head 部分，只需添加以下标签：

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

如果您只想在屏幕为 "wide" 时添加 width: 60%，您可以使用：

@media screen and (orientation:landscape) {
  body {
    width: 60%;
  }
}

见here

希望对你有帮助，再见

如何在浏览器 window 调整大小时更改正文宽度，以便于阅读内容？

How to change the body width when the browser window is resized, so that the content is easily read?

javascript

css

browser

resize