Question

我有一个包含一些内容的网站。根据用户的屏幕分辨率，我希望显示不同的内容，以便移动设备会有一些其他内容，但网站的其余部分将是相同的。我做了一些研究，似乎唯一可行的方法是使用javascript。我大部分时间都在编写PHP代码，所以我真的很喜欢javascript，所以如果有人能给我提供一个简单的脚本会很好。

我需要的是像这样的javascript函数：

if (screen resolution < X x X) {
show some content...
} else {
show some other content ...
}

如果javascript关闭，它应该只显示一些其他内容.. :)我可以安装jquery如果它有帮助。感谢

对于html代码的示例也很好。

Answer 1

你不应该检测用户是否在使用javascript的移动设备上。我推荐你用PHP。你可以使用[$ _SERVER 'HTTP_USER_AGENT']然后简单地解析字符串以查看它是什么类型的用户代理。我现在正在实施同样的概念。

您也可以使用此课程Mobile Detect

include("Mobile_Detect.php");
$detect = new Mobile_Detect();

if ($detect->isMobile()) {
     // any mobile platform
}

Answer 2

您可以使用css媒体查询来定位不同的屏幕分辨率。例如：

@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
  /* iPad in landscape orientation css */
}
@media only screen and (max-device-width: 480px{
  /* iPhone css */
}

更多信息： http://mislav.uniqpath.com/2010/04/targeted-css/ http://webdesignerwall.com/tutorials/css3-media-queries

Answer 3

查看CSS at-rules。它们允许您为CSS规则的“命名空间”指定最大和最小宽度，在其中您可以为较小的屏幕设置不同的规则。但是在使用它们时要小心，因为IE不喜欢支持好东西。

@media screen, projection and (max-device-width: 800px) {}
@media screen and (max-device-width: 300px) {}

在我正在处理的项目中，如果用户代理包含某些关键字（从JS查看HTTP标头），我们实际上会重定向到页面的移动版本，并完全使用不同的样式表。

Answer 4

你应该尝试CSS媒体查询

Answer 5

在PHP中不知道但在.Net中你可以检测到他们是移动访问者，然后你可以将它们重定向到网站的移动部分。

然后您真正需要做的就是重新使用现有的Web控件来编写小网站。再次，不确定您是否在PHP中使用了这个概念，但我想你会这么做。

根据屏幕分辨率显示内容

5 个答案: