如何检测浏览器何时过小然后告诉访问者放大浏览器继续？答案

【问题标题】：How to detect when the browser is too small and then tell visitors to enlarge browser to continue?如何检测浏览器何时过小然后告诉访问者放大浏览器继续？
【发布时间】：2013-03-17 22:18:53
【问题描述】：

是否可以创建一个 jquery 脚本，可以检测浏览器何时变小，然后告诉您的访问者放大浏览器继续？

有谁知道这方面的 jquery 脚本吗？

【问题讨论】：

你并不真的需要 jQuery。只需使用window.screen.width、.height 即可获取屏幕尺寸
是的，但是您尝试过什么？一个好的开始是寻找找到屏幕宽度和高度的方法。
如果用户无法确定浏览器窗口何时太小而无法正常使用您的页面，则该用户甚至不应该在互联网上。

标签： jquery browser popup detect

【解决方案1】：

当他们的浏览器最大化但仍然太小时怎么办？

他们是否必须不断地处理信息？

这是一个示例脚本：

if( window.clientWidth < 1000 ){ 
 alert("Send your business elsewhere"); 
}

这种强制用户调整大小的想法似乎太具有侵略性而没有任何用处，因为用户应该确定他们的窗口大小。响应式设计是将视图塑造给用户，而不是将用户塑造成你的视图。

【讨论】：

【解决方案2】：

每个人都对这样做的有效性提出了很好的看法。但是——

var tooSmall = 500;
var wHeight = $(window).height();
var wWidth = $(window).width();
if ( wWidth < tooSmall ){
    //Tell them so!
}

【讨论】：

【解决方案3】：

使用 jQuery 就可以了，像这样。

if($(window).width() < 960) {
    // Do something when less than 960
}

或纯 JavaScript

if(document.width < 960) {
    // Do something when less than 960
}

替代 CSS 解决方案

由于您没有提供任何上下文，因此很难说出最佳解决方案是什么，但另一种选择是使用 CSS media queries 并在窗口低于特定宽度时显示一条消息。

这样做的好处是您不必担心监听窗口调整大小事件等，也可以跟踪当前屏幕大小。浏览器会为你处理好它。如果您沿着侦听窗口调整大小事件的道路前进，它也可能比 JS 解决方案更有效。此外，还将处理用户禁用 JavaScript 的情况。

标记：

<div id="error-message">Please enlarge your window for the site to work</div>

CSS：

#error-message {
   display: none;
}

@media only screen and (max-width: 960px) {
   #error-message {
        display: block;
   }
}

【讨论】：