load js or php based on users screen size
Question
I have a couple of Swiffy (HTML5 SWF) animations which i only want to be loaded based on the users screen size!
iv found some JavaScript below which says it will load if screnn bigger than 1400 but its not working!
<script language=javascript>
if(screen.Width>1400)
{
document.write("<?php include('/map/map4.php');?>");
}
else
{
document.write("<?php include('/map/map1.php');?>");
}
</script>
dose any one know of away to do this either with the above or another way?
thanks
4 answers
solution1
5 2012-08-15 09:10:08
Change this:
if(screen.Width>1400)
to:
if (screen.width > 1400)
width property of the screen object should be lowercase.
Also note that when JavaScript is executed ServerSide processing is ended, and your document.write s only output text instead of executable php codes, you can use the load method of the jQuery instead.
Load data from the server and place the returned HTML into the matched element.
if (screen.width > 1400) {
$('#wrapper').load('/map/map4.php');
} else {
$('#wrapper').load('/map/map1.php');
}
solution2
0 2012-08-15 09:10:54
The contents of those php files will be injected into the JavaScript literal and could possibly break the literal. Could you post the resultant html when viewed from a browser.
Possibly what you want to do is put both php files into the code in seperate divs and then use CSS to hide or display the relevant one.
If you do this you could use @media css queries to display/hide the sections based on window size and this would dynamically adjust as the user resizes the browsers.
solution3
0 2012-08-15 09:20:59
If you just have SWF Objects you can add them to the document via DOM Manipulation
If you want to have a more sophisticated way of checking the users screen theres a library jRespond , it will poll for browser size and updates if the user resizes the browser
solution4
0 2017-10-14 16:42:49
I was facing the same dilema, so i used this workaround, i hope it helps.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>435</title>
<script> if( document.cookie.indexOf("resolucion5") < 0) {
//alert("Cargando resolucion.");
if (screen.width > 1199){ document.cookie = "resolucion5=desktop; max-age=" + 5; }
if ((screen.width > 768)&&(screen.width < 1200)){ document.cookie = "resolucion5=tablet; max-age=" + 5; }
if ((screen.width > 380)&&(screen.width < 780)){ document.cookie = "resolucion5=cel; max-age=" + 5; }
if (screen.width < 381){ document.cookie = "resolucion5=mini; max-age=" + 5;
}
location.reload();
}</script>
<? if ($_COOKIE["resolucion5"]=="desktop"){$resolucion="";}
elseif ($_COOKIE["resolucion5"]=="tablet"){$resolucion="med";}
elseif ($_COOKIE["resolucion5"]=="cel"){$resolucion="med";}
elseif ($_COOKIE["resolucion5"]=="mini"){$resolucion="mini";} ?>
<link href="style<? echo $resolucion; ?>.php" rel="stylesheet">
<script src="somescript<? echo $resolucion; ?>.js" type="text/javascript"></script>
</head>
<body>
<? require("menu".$resolucion.".php"); ?><br>
<img src="welcome<? echo $resolucion; ?>.jpg">
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.