Реагировать на страницу получая странное масштабирование в адаптивном режиме

Question

Я вижу странное поведение при масштабировании в адаптивном режиме Chrome Developer Tools. Window.innerWidth сообщает о 980 независимо от фактической ширины окна (если фактическая ширина не превышает 980 - тогда он сообщает правильно).

Ниже представлены три снимка экрана с размером окна 600, 500 и 400 пикселей. Вы можете видеть, что ширина указывается как 980 в каждом случае, что деление шириной 200 пикселей масштабируется так, чтобы занимать около четверти окна, даже если окно имеет ширину всего 400 пикселей, и что текст сжимается, чтобы стать в значительной степени нечитаемой:

Окно шириной 600 пикселей

Окно шириной 500 пикселей

Окно шириной 400 пикселей

,

Вот мой файл index.js:

импорт React из 'реакции'; import { render } из 'response-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')
);

,

Это работает, как и ожидалось, когда я изменяю размер браузера Chrome в Windows 10. Только когда я включаю Chrome Developer Tools и изменяю размер окна в режиме Responsive, я получаю странные результаты. Я проверил это на нескольких мобильных устройствах, и там я вижу такое же поведение при масштабировании.

Я проверил, что событие updateWindowDimensions корректно срабатывает при изменении размеров окна, но window.innerWidth всегда сообщает о 980.

Я довольно новичок в веб-разработке, но я не видел такого поведения с похожими страницами, разработанными на Angular или прямом JavaScript. Это что-то особенное для React или набора инструментов рога-рогатки? Я почти уверен, что мое примерное приложение отбросило все, что мог бы сделать шаблон реагирующей рогатки.

Есть мысли о том, что это вызывает?