Note: For some reason my code works for when the website link is clicked through Instagram but not through TikTok.
I am trying to detect that a device is mobile in order to render the screen differently. We have a 4 column grid layout on desktop and want to display only 1 or 2 columns if the device is mobile.
We declare const [columns, setColumns] = React.useState(4);
This is the existing code to detect screen sizes:
window.addEventListener(
"resize",
function (event) {
if (event.target.innerWidth > 700) {
setColumns(4);
} else if (
event.target.innerWidth < 700 &&
event.target.innerWidth > 600
) {
setColumns(3);
} else if (
event.target.innerWidth < 600 &&
event.target.innerWidth > 400
) {
setColumns(2);
} else {
setColumns(1);
}
},
true
);
For the rendered component we pass in these props to GridDropZone from react-grid-dnd:
<GridDropZone
disableDrag={true}
id="items"
boxesPerRow={columns}
rowHeight={353}
style={{ height: `${(items.length / 4) * 350}px` }}
>
It seems that this logic is good enough to only show 2 columns when I am on my iPhone via my Chrome browser. However, when I try clicking on the link to our website through a TikTok profile, it seems that we still display 4 columns. This does not seem to be a problem on Instagram. Why is this different than opening it Instagram and via my mobile Chrome browser and how would you recommend fixing this? Thanks!
Edit: This fix still only works on iOS chrome and not when I open the website through TikTok.
if (window.matchMedia("only screen and (max-width: 760px)").matches) {
setColumns(1);
}
Edit: makeStyles()
const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: "#fcfcfc",
},
icon: {
marginRight: theme.spacing(2),
},
heroContent: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(8, 0, 6),
},
heroButtons: {
marginTop: theme.spacing(4),
},
cardGrid: {
paddingTop: theme.spacing(8),
paddingBottom: theme.spacing(8),
marginTop: 10,
},
card: {
height: "100%",
display: "flex",
flexDirection: "column",
},
cardMedia: {
paddingTop: "56.25%", // 16:9
},
cardContent: {
flexGrow: 1,
},
footer: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(6),
},
sectionDesktop: {
display: "none",
[theme.breakpoints.up("lg")]: {
display: "flex",
},
},
formControl: {
margin: theme.spacing(1),
minWidth: 150,
maxHeight: 40,
color: "black",
},
selectEmpty: {
marginTop: theme.spacing(2),
},
Issue resolved. As you can see I have a window.addEventListener("resize", ...) and it does work on making my grid 1 column for Instagram. However, this did not work for TikTok because it appears that TikTok does not trigger the "resize" event when I click on my website through the app.
Thus, I created a separate resize() function and resize the window manually when the page is first rendered through useEffect(). I also added a new if statement that uses window.matchMedia() to check if the device is mobile. The code for the solution is shown below.
function resize(innerWidth) {
if (window.matchMedia("only screen and (max-width: 760px)").matches) {
setColumns(1);
} else if (innerWidth > 700) {
setColumns(4);
} else if (
innerWidth < 700 &&
innerWidth > 600
) {
setColumns(3);
} else if (
innerWidth < 600 &&
innerWidth > 400
) {
setColumns(2);
} else {
setColumns(1);
}
}
window.addEventListener(
"resize",
function (event) {
resize(event.target.innerWidth)
},
true
);
useEffect(() => { resize(window.innerWidth) }, [])