Hago pequeñas páginas web por diversión y las alojo en mi servidor solo para aprender cosas y, a veces, se las envío a algunas personas que conozco para mostrarles lo que he aprendido, pero me gustaría que mis páginas web no sean t accesible a las personas en pantalla pequeña. traté de hacer
@media (max-width: 800px){ body{ height: 0px !important; width: 0px !important; } }pero no funcionó
Prueba esto:
@media (max-width: 800px) { html { visibility: hidden; } }@media (max-width: 800px){ body{ display:none; } }Una mejor manera de hacer esto es usando window.innerWidth .
Puede hacer una función de carga que verifique el ancho de la ventana gráfica.
window.onload = () => { if (window.innerWidth <= 800) { document.body.innerHTML = 'Page not accessible on small screens.' } else { loadDOM(); /* maybe put [display: none] on body as default and remove it here */ } }Este método es mejor para el usuario. Al menos sabrán que tienen que acceder al sitio desde un dispositivo más grande.