支持网站上的最小宽度答案

【问题标题】：Supporting a minimum width on a website支持网站上的最小宽度
【发布时间】：2017-04-09 09:49:12
【问题描述】：

如何确保我的应用仅在 1300 像素的最小屏幕宽度上呈现。小于此值的任何内容都应将用户重定向到固定网页，例如 404。这是一个 React 应用程序，我使用标准根 div 来呈现 index.html 中的组件。

【问题讨论】：

在页面加载时检查屏幕宽度，如果小于 1300 像素，则进行重定向。

【解决方案1】：

如果你正在使用 reactjs，你可以试试这个。

window.addEventListener('load', () => {
  const width = screen.width;
  if (width > 1300) {
    render((
      <SomeComponent />
    ), document.getElementById('root'));
  }
  else {
    render((
      <div>404 not found </div>
    ), document.getElementById('root'));
  }
});

【讨论】：

可以修改这个以将用户重定向到另一个页面吗？
我没试过，但我认为 else 部分中的 window.location.replace("http://stackoverflow.com"); 会按照 Alfred Xing 的建议工作

【解决方案2】：

您可以在加载时检查屏幕宽度（在根组件的构造函数或componentDidMount 中，如果小于 1300，则重定向它们：

var width = screen.width;
if (width < 1300) window.location.replace("http://stackoverflow.com");

【讨论】：