根据屏幕分辨率显示内容

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' ] 然后简单地解析出字符串以查看它是哪种类型的用户代理。 我现在实际上正在实施同样的概念。

你也可以使用这个类移动检测

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 */
}

更多信息：

• https://mislav.net/2010/04/targeted-css/
• https://webdesignerwall.com/tutorials/css3-media-queries

Answer 3

查看 CSS 规则。 它们允许您为 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 中有这个概念，但我想您会的。