Nota: Por alguna razón, mi código funciona cuando se hace clic en el enlace del sitio web a través de Instagram pero no a través de TikTok.
Estoy tratando de detectar que un dispositivo es móvil para mostrar la pantalla de manera diferente. Tenemos un diseño de cuadrícula de 4 columnas en el escritorio y queremos mostrar solo 1 o 2 columnas si el dispositivo es móvil.
Declaramos const [columnas, setColumnas] = React.useState(4);
Este es el código existente para detectar tamaños de pantalla:
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 );Para el componente renderizado, pasamos estos accesorios a GridDropZone desde react-grid-dnd:
<GridDropZone disableDrag={true} id="items" boxesPerRow={columns} rowHeight={353} style={{ height: `${(items.length / 4) * 350}px` }} >Parece que esta lógica es lo suficientemente buena como para mostrar solo 2 columnas cuando estoy en mi iPhone a través de mi navegador Chrome. Sin embargo, cuando intento hacer clic en el enlace a nuestro sitio web a través de un perfil de TikTok, parece que todavía mostramos 4 columnas. Esto no parece ser un problema en Instagram. ¿Por qué es diferente a abrir Instagram y a través de mi navegador Chrome móvil y cómo recomendaría solucionarlo? ¡Gracias!
Editar: esta solución solo funciona en iOS Chrome y no cuando abro el sitio web a través de TikTok.
if (window.matchMedia("only screen and (max-width: 760px)").matches) { setColumns(1); }Editar: hacerEstilos()
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), },Problema resuelto. Como puede ver, tengo un window.addEventListener("resize", ...) y funciona para hacer que mi cuadrícula 1 sea una columna para Instagram. Sin embargo, esto no funcionó para TikTok porque parece que TikTok no activa el evento de "cambio de tamaño" cuando hago clic en mi sitio web a través de la aplicación.
Por lo tanto, creé una función de cambio de tamaño () separada y cambie el tamaño de la ventana manualmente cuando la página se representa por primera vez a través de useEffect (). También agregué una nueva instrucción if que usa window.matchMedia() para verificar si el dispositivo es móvil. El código para la solución se muestra a continuación.
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) }, [])