根据用户的屏幕大小加载js或php

I have a couple of Swiffy (HTML5 SWF) animations which i only want to be loaded based on the users screen size!

我有几个Swiffy（HTML5 SWF）动画，我只想根据用户屏幕大小加载！

iv found some JavaScript below which says it will load if screnn bigger than 1400 but its not working!

iv发现下面的一些JavaScript表示如果screnn大于1400但它不能正常加载！

<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 个解决方案

#1

Change this:

改变这个：

if(screen.Width>1400)

to:

至：

if (screen.width > 1400)

width property of the screen object should be lowercase.

screen对象的width属性应为小写。

Also note that when JavaScript is executed ServerSide processing is ended, and your document.writes only output text instead of executable php codes, you can use the load method of the jQuery instead.

还要注意，当执行JavaScript时，ServerSide处理结束，而你的document.writes只输出文本而不是可执行的php代码，你可以使用jQuery的load方法代替。

Load data from the server and place the returned HTML into the matched element.

从服务器加载数据并将返回的HTML放入匹配的元素中。

if (screen.width > 1400) {
     $('#wrapper').load('/map/map4.php');
} else {
     $('#wrapper').load('/map/map1.php');
}

#2

If you just have SWF Objects you can add them to the document via DOM Manipulation

如果您只有SWF对象，则可以通过DOM操作将它们添加到文档中

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

如果你想有一个更复杂的方法来检查用户屏幕是一个库jRespond，它将轮询浏览器大小并更新用户调整浏览器的大小

#3

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.

这些php文件的内容将被注入JavaScript文字，并可能破坏文字。你可以在浏览器中查看生成的html。

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.

可能你想要做的是将两个php文件放在单独的div中的代码中，然后使用CSS来隐藏或显示相关的。

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.

如果你这样做，你可以使用@media css查询根据窗口大小显示/隐藏部分，这将在用户调整浏览器大小时动态调整。

#4

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>

#1