React Page Getting Weird Scaling in Responsive Mode

Question

I’m seeing a weird scaling behavior in Chrome Developer Tools Responsive mode. The window.innerWidth is reporting 980 regardless of the actual window width (unless the actual width is over 980 – then it reports correctly).

Below are three screen shots with the window size set to 600, 500 and 400 pixels wide. You can see that the width is reported as 980 in each case, that the 200 pixel wide div is scaled to take up about a quarter of the window even when the window is only 400 pixels wide, and that the text shrinks to become pretty much unreadable:

600px wide window

500px wide window

400px wide window

.

Here is my index.js file:

import React from 'react'; import { render } from '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')
);

.

This works as expected when I resize the Chrome browser in Windows 10. It’s only when I enable Chrome Developer Tools and resize the window in Responsive mode then I get weird results. I tested this on a couple of mobile devices and I see the same scaling behavior there, too.

I verified that the updateWindowDimensions event is firing correctly on window resizes, but window.innerWidth always reports 980.

I’m fairly new to web development but I have not seen this behavior with similar pages developed in Angular or straight JavaScript. Is this something specific to React or the react-slingshot tool stack? I’m pretty sure my sample app has stripped away anything that the react-slingshot boilerplate might have been doing.

Any thoughts on what's causing this?