如何解决如何防止用户使浏览器窗口的宽度小于HTML和CSS中的预定义宽度?
我想知道如何防止用户使包含我的网页的浏览器窗口窄于预定义的宽度,因为Firefox自动定义的浏览器窗口的最小宽度会破坏我的布局。我该怎么办?谢谢!
解决方法
不能。浏览器属于用户,他们可以使用浏览器执行任何操作。
但是,好吧,如果你绝望了,你可以。您可以使用以下JavaScript来获取窗口的当前宽度:
var width = window.innerWidth;
然后您可以使用以下方法调整窗口大小:
window.resizeTo(800,600)
注意-仅当您使用window.open()
https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo
,这是一个示例,其中相邻的框由于屏幕尺寸太小而被打断。因此它们出现在彼此下方,而不是彼此相邻。
div {
height: 100px;
width: 100px;
border: 2px solid black;
padding: 5px;
float: left;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
只需添加body { min-width: 1200px; overflow: auto/scroll; }
,我们就可以为网站定义最小宽度。这样,所有框都显示在一行中。如果用户浏览器小于1200px,他们将获得水平滚动条。
body {
min-width: 1200px;
overflow-x: auto;
}
div {
height: 100px;
width: 100px;
border: 2px solid black;
padding: 5px;
float: left;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
但是,使用这种方法或尝试使用的方法,意味着它缺乏响应,因此缺乏技能并且网站质量低下。一个好的Web开发人员将通过媒体查询来更改设计,以防止溢出或最小宽度大于320px(最小的移动屏幕宽度)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。