0

我在 Chrome 开发者工具响应模式中看到了一种奇怪的缩放行为。无论实际窗口宽度如何，window.innerWidth 都报告 980（除非实际宽度超过 980，否则它会正确报告）。

下面是三个屏幕截图，窗口大小设置为 600、500 和 400 像素宽。您可以看到，在每种情况下，宽度都报告为 980，即使窗口只有 400 像素宽，200 像素宽的 div 也被缩放以占据窗口的大约四分之一，并且文本缩小到几乎不可读：

600px 宽的窗口

500px 宽的窗口

400px 宽的窗口

.

这是我的 index.js 文件：

从“反应”导入反应；从'react-dom'导入{渲染}；

class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 0,
            height: 0
        };

        this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
    }

    componentDidMount() {
        this.updateWindowDimensions();
        window.addEventListener('resize', this.updateWindowDimensions);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.updateWindowDimensions);
    }

    updateWindowDimensions() {
        this.setState({width: window.innerWidth, height: window.innerHeight});
    }

    render() {
        return (
            <div>
                <div style={{width: "200px", background: "LightBlue"}}>
                    <h1>TEST PAGE</h1>
                </div>
                <h3>width: {this.state.width} </h3>
                <h3>height: {this.state.height}</h3>
            </div>
        );
    }
}

render(
    <HomePage />,
    document.getElementById('app')
);

.

当我在 Windows 10 中调整 Chrome 浏览器的大小时，这可以按预期工作。只有当我启用 Chrome 开发人员工具并在响应模式下调整窗口大小时，我才会得到奇怪的结果。我在几个移动设备上对此进行了测试，我也看到了相同的缩放行为。

我验证了 updateWindowDimensions 事件在窗口调整大小时正确触发，但 window.innerWidth 总是报告 980。

我对 Web 开发相当陌生，但我还没有看到用 Angular 或直接 JavaScript 开发的类似页面的这种行为。这是特定于 React 或 react-slingshot 工具堆栈的东西吗？我很确定我的示例应用程序已经剥离了 react-slingshot 样板可能一直在做的任何事情。

关于是什么原因造成的任何想法？

4

0 回答 0