Socorro! No sé cómo detectar ancho de pantalla y pasarlo a PHP

  • Autor Autor Usuario eliminado 136921
  • Fecha de inicio Fecha de inicio
U

Usuario eliminado 136921

Tengo este código en PHP:

Insertar CODE, HTML o PHP: 
<?php echo "<iframe src="https://height-450/width-" . "XXXXXX" . " frameborder='0' scrolling='no' allowfullscreen='true'></iframe>";  ?>

Tengo que detectar el ancho de pantalla del dispositivo y que se ponga en XXXXX

En jQuery tengo esto:

Insertar CODE, HTML o PHP: 
$(window).resize(function() {
    $("#dimensions").html($(window).width());
	}).resize();

Luego en PHP pongo <div id="dimensions"></div> y se muestra el ancho de pantalla en número (a mi me sale 1366 porque estoy desde el portátil), pero ¿cómo guardo ese número en una variable y poder ponerla arriba donde está el "XXXXX" ?

Pero no sé más.
 
No es requiero php en lo que andas haciendo

parte superior;

<script type="text/javascript">
window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
</script>


uso

height: window.innerHeight,
width: window.innerWidth

ejemplo

var iframe = "<iframe src="https://height-450/width-" . "+ window.innerHeight +" . " frameborder='0' scrolling='no' allowfullscreen='true'></iframe> ";
 
Mask7OfDragon dijo:
No es requiero php en lo que andas haciendo

parte superior;

<script type="text/javascript">
window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
</script>


uso

height: window.innerHeight,
width: window.innerWidth

ejemplo

var iframe = "<iframe src="https://height-450/width-" . "+ window.innerHeight +" . " frameborder='0' scrolling='no' allowfullscreen='true'></iframe> ";
Hacer clic para expandir...

El problema es que en cada post hay un iframe distinto (un vídeo por post), ¿dónde pongo el var iframe= ....? en single.php ??
 
mmm ponele un max-width y width: 100% a los iframes (height: auto)... ejemplo
PHP: 
iframe{ 
max-width: 1300px;
width: 100%;
height: auto;
}

y no necesitas andar modificando cada iframe ni nada... eso se adapta solo al tamaño de pantalla del usuario
 
cicklow dijo:
mmm ponele un max-width y width: 100% a los iframes (height: auto)... ejemplo
PHP: 
iframe{ 
max-width: 1300px;
width: 100%;
height: auto;
}

y no necesitas andar modificando cada iframe ni nada... eso se adapta solo al tamaño de pantalla del usuario
Hacer clic para expandir...

Que va, esos embed tienen un tamaño que se indica en el src, el width y height del iframe es aparte.

Fíjate: "<iframe src="https://domain/height-450/width-800" ...

Son así.
 
Alejandro Ruiz dijo:
Que va, esos embed tienen un tamaño que se indica en el src, el width y height del iframe es aparte.

Fíjate: "<iframe src="https://domain/height-450/width-800" ...

Son así.
Hacer clic para expandir...

entiendo... desde php no puedes... tendras que hacerlo desde js... lo max ue podrias hacer desde php es detectar si es un mobil y colocarle un max, un tablet y lo mismo o pc y lo mismo...
 
porque no intentas meter el iframe en un contenedor

<div class="video-contenedor"> aqui el iframe </div>

y solo le das los estilos css al class "video-contenedor" width:100%; height: auto;

asi los iframe se tendrian que adaptar al ancho de la pantalla independientemente de que tamaño se indique en el src
 
Si es un video que tienes en el iframe tienes que poner ancho y alto en 100% al video, luego al iframe le agregas el ancho y alto que quieres!
 
pasa esos parametros por js

ejemplo


var alto = <?php echo $alto; ?>;
var ancho = <?php echo $ancho; ?>;

Luego con js

document.getElementById('IframeDinamico').width = alto;
y asi.
 
Se me ocurre lo siguiente bro aunque ni idea el propósito de esto pero bueno aquí te dejo lo que se me ocurrió a mi.

vamos a decir que en tu php tengas como repuesta en el DOM algo como esto:

HTML: 
<iframe src="https://domain/height-450/width-{width}/id_delvideo" id="search_iframe" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>

para que esto funcione el atributo src de tu iframe debe contener un patrón para poder hacer dinámico el ancho {width}

te puedes fijar que la url del iframe es:

https://domain/height-450/width-{width}/id_delvideo

donde {width} sera reemplazado por el ancho según el tamaño de la ventana y para eso utilizo el siguiente script:

Insertar CODE, HTML o PHP: 
<script>
$(function() {
	var urlBase = $('#search_iframe').attr('src');
	var ChangeWidth = function () {
		var w = $(window).width();
		var src = urlBase.replace('{width}', w);
		setTimeout(function () {
			$('#search_iframe').attr('src', src);
		}, 5);
	}
	ChangeWidth();
	$(window).resize(function() {
		ChangeWidth();
	}).ready();
});
</script>
 
Para pasar valores Javascript a PHP se suele usar ajax, le pasas los datos que necesitas a un archivo PHP que a su vez retorna algo y en función de ello modificas al elemento HTML.
 
El php se ejecuta en tu servidor y si el browser no envía el ancho no puedes hacer nada. Por eso javascript que se ejecuta en el browser es la opción segura, puedes por ejemplo averiguar el ancho y ponerlo en una cookie, la próxima vez que se ejecute el php tienes el valor en la cookie. Pero javascript es tu herramienta
 
iframe{
max-width: <?php echo $max; ?>px;
width: <?php echo $width; ?>px;
height: <?php echo $height; ?>px;
}

y listo.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba