React Component Not Displaying Based on Screen Width on Mobile Devices And Browsers

Question

Heres my component code

constructor(props) {

        super(props);

        this.updateView = this.updateView.bind(this);

        this.state = {
            screen_width: ''
        }
    }

    componentDidMount() {

        window.addEventListener("resize", this.updateView);

        this.setState({
            screen_width: window.innerWidth
        })

    }

    componentDidUpdate(prevProps) {

    }

    updateView() {

        this.setState({
            screen_width: window.innerWidth
        })
    }

    displayHome() {

        console.log(this.state.screen_width);

        if (this.state.screen_width >= 768) {
            return (
                <React.Fragment>
                    <HomeDesktop/>
                </React.Fragment>
            )
        }
        else {
            return (
                <React.Fragment>
                    <HomeMobile/>
                </React.Fragment>
            )
        }
    }
  render() {

    return (

        {this.displayHome()}
    )
  }

My problem is that on mobile devices, its supposed to display HomeMobile initially, but it just doesn't do that. The space that HomeMobile is supposed to take up is just blank. A picture is supposed to come up, but currently ONLY after scrolling does the picture show up. Initially I thought this was based on css positioning, but when I just put within render, the picture shows up as normal. This means for some reason displayHome() is not displaying the mobile component properly on the initial render.

My code works fine on desktop, if you are above a certain width, it will show the desktop view, and under a certain width it will show the mobile view. On mobile devices, the Home components just straight up don't show up.

Has anyone ever dealt with a similar issue with mobile views on the initial render? How do I get HomeMobile to show up on the initial render?

Any errors in console in mobile browser? Can you use Chrome remote debugging and check? https://developer.chrome.com/docs/devtools/remote-debugging/ — Aleksandr Smyshliaev, Jul 26 '21 at 05:32

Aleksandr Smyshliaev · Answer 1 · 2021-07-26T06:50:27.400

0

In mobile physical resolution can be 1920x1080 but for example 3 physical pixels can be counted as 1, so everything will not look really small, so can be tricky. https://www.programmersought.com/article/94365499679/

Related window.innerWidth in Chrome's device mode

Better to use CSS media queries for this task, implementation in JS can change and can be differences in different browsers.

edited Jul 26 '21 at 06:50

answered Jul 26 '21 at 05:03

Aleksandr Smyshliaev

558
2
8

score 0 · Answer 2 · answered Jul 26 '21 at 06:02

I managed to find out what was happening. Even though the screen was small, it wasn't considered sub 768 pixels for window.innerWidth;

I changed the code to this:

displayHome() {

    console.log(this.state.screen_width);

    return (
        <React.Fragment>
            {window.screen.width >= 768 ? <HomeDesktop/> : <HomeMobile/>}
        </React.Fragment>
    )


}

Now the mobile part renders on the initial render. I dont know exactly why window.innerWidth and window.screen.width are different but here we are.

React Component Not Displaying Based on Screen Width on Mobile Devices And Browsers

2 Answers2