Se que esta pregunta se ha varias veces en el foro pero no he logrado el resultado que busco con lo encontrado.
Mi idea es que con javascript sepa el actual ancho del navegador del usuario y luego según ese ancho introduzca un include php o no. Por ejemplo:
<!-- @media(max-width:767px) { -->
<script type="text/javascript">
if (window.matchMedia("(max-width:767px)").matches) {
/* La pantalla tiene menos o igual de 767 píxeles de ancho, entonces no incluyo el include php o includes php*/
} else {
/* La pantalla tiene más o igual de 767 píxeles de ancho, entonces si incluyo el include php o includes php */
}
</script>
El include php son dos columnas izquierda y derecha de un aside que tengo que desactivar en móviles ya que en media querys con css no entran y se ocultan sin embargo en google https://developers.google.com/speed/pagespeed/insights/ he de desactivarlos para que no los reconozca ni carguen y así mejora la puntuación.
<?php include "modules/aside-izq.php"; ?>
<?php include "modules/aside-der.php"; ?>
¿Hay alguna opción para llevar el resultado de javascript a php y así según la resolución cargar o no cargar dichos includes?
Repito en el CSS media queries ya están desactivados esos dos aside, solo me falta desactivar los dos includes php.
EDITO PARA AÑADIR NUEVA OPCIÓN
Hola de nuevo.
Creo que casi estoy consiguiendo una opción que me puede servir, donde nada más cargar la web hago el script para que lea la resolución y luego enviar ese valor a php para que este a la vez luego lo envíe al template y este decida si cargar los includes o no. Por ejemplo así:
En el index tengo este script que creo que me puede servir de esta dos maneras, no se cual sería la más correcta.
Opción 1 con POST y respuesta en php externo.
<!-- Opción 1 a través de POST -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var cargarInclude = 0;
$(document).ready(function(){
var resolucion = $( window ).width();
$.ajax({
type:'POST',
url:'views/modules/resolucionAjax.php',
data: { resolucion: resolucion },
success:function(respuesta){
console.log("Respuesta de Php:" +respuesta);
//alert(respuesta);
if(respuesta <= 767){
console.log("La respuesta dentro de success es: No cargo include o cargo template móviles");
cargarInclude = 0;
}
else{
console.log("La respuesta dentro de success es: Si cargo include o cargo template grande");
cargarInclude = 1;
}
}
});
});
</script>
Luego en resolucionAjax.php recibo los valores para que ajax los vuelva a recibir como respuesta.
<?php
$respuesta = $_POST["resolucion"];
echo $respuesta;
?>
Opción 2 en un mismo archivo.
<!-- Opción 2 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var resolucionMoviles = false;
$(document).ready(function(){
var width = window.innerWidth;
var resolucion = $( window ).width();
if(resolucion <= 767){
console.log("No cargo include o cargo template móviles");
cargarInclude = 0;
}
else{
console.log("Si cargo include o cargo template grande");
cargarInclude = 1;
}
});
</script>
Y luego la idea sería imprimirla en el index con php y ya así con esta variable hacer el resto.
<?php
echo "<p>La variable cargarInclude viene desde jquery con valor: " .$cargarInclude."</p>";
?>
Pero claro no viene ningún valor ya que no se si es posible hacerlo así o como traer siguiendo estas dos opciones el valor obtenido en jquery con la variable cargarInclude para que lo lea php
¿Se puede hacer de esta manera? ¿Cómo podría pasar ese valor de jquery a php?
Gracias de nuevo por vuestra ayuda, saludos.