Porque el screen.width no me funciona?

[Drakaris]

Hola. Estoy haciendo mi página web responsive a móviles y tengo que poner:
tablet.js

Código [Seleccionar] Expandir


function anchura{
if(screen.width < 768){
  $("#header").remove();
}
}


Que me dice, si el ancho de mi pantalla es menor que 768 o igual (tablets and phones) me eliminará el elemento con el id header

Puse este script en las etiquetas head:

Código [Seleccionar] Expandir


<script type="javascript/text" src="tablet.js">
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


Y no me funciona, porque será?
También lo he probado de llamarlo con onload pero no me funcionó
Gracias.

[#!drvy]

Esa función no esta declarada de forma valida. Además lo mejor que puedes hacer para diseño responsive es usar CSS, no javascript.

CSS media queries
https://developer.mozilla.org/es/docs/CSS/Media_queries

Media Queries en CSS ¿Cómo funcionan?
https://www.silocreativo.com/media-queries-css/

Código (javascript) [Seleccionar] Expandir

var anchura = (function(){
    if(screen.width < 768){
        $('#header').remove();
    }
});

Además lo scripts se colocan al final del body antes de </body>.


Saludos

[Drakaris]

Esa función no esta declarada de forma valida. Además lo mejor que puedes hacer para diseño responsive es usar CSS, no javascript.

CSS media queries
https://developer.mozilla.org/es/docs/CSS/Media_queries

Media Queries en CSS ¿Cómo funcionan?
https://www.silocreativo.com/media-queries-css/

Código (javascript) [Seleccionar] Expandir

var anchura = (function(){
   if(screen.width < 768){
       $('#header').remove();
   }
});

Además lo scripts se colocan al final del body antes de </body>.


Saludos

Hola #!drvy he intentado lo que me has dicho pero no me ha funcionado me da error, me dice: Uncaught SyntaxError: Unexpected token {
Porque será?

Gracias

[engel lex]

funciona perfecto el codigo de drvy, tu problema es un { abierto donde no debe

[Drakaris]

funciona perfecto el codigo de drvy, tu problema es un { abierto donde no debe

Hola he intentado lo que me han dicho, el jQuery funciona correctamente en mi pagina web. Cuando pongo este código me va bien:

Código [Seleccionar] Expandir


$(document).ready(functions(){
    $("#header").remove();
});


Pero cuando pongo este otro no:

Código [Seleccionar] Expandir


$(document).ready(functions(){
    if(screen.width < 768){
        $("#header").remove();
   }
});


Parece como si pongo el if  me detectara como mal, ya que no hace nada, porque será eso?

Gracias

[Drakaris]

Ya lo resolví, es este código:

Código [Seleccionar] Expandir


$(document).ready(function(){
    if (window.matchMedia("(max-width: 768px)").matches){
      $("#header").remove();
    }
  });


Gracias por su atención.