根据屏幕分辨率显示内容

发布于 2024-12-02 09:36:53 字数 407 浏览 1 评论 0原文

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

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

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

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

如果有 html 代码的例子就更好了。

原文

I have a website with some content. Based on the users screen resolution i want to show different content so that mobile devices will have some other content, but the rest of the site will be the same. I did some research, and it seems like the only possible way is with javascript. I code PHP most of the time, so i really suck at javascript, so it would be nice if someone could provide me with a simple script.

What i need is a javascript function like this:

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

If javascript is off, it should just show some other content.. :) I can install jquery if it helps. Thanks

It would be nice with examples for the html code too.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情深缘浅 2024-12-09 09:36:53

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

您还可以使用此类移动检测

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

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

you should NOT detect if the user is on a mobile device with javascript. i recommend you this in PHP. you can use [$_SERVER'HTTP_USER_AGENT'] and then simply parse out the string to see what kind of user agent it is. I am actually implementing this same concept right now.

you can also use this class Mobile Detect

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

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

回复收藏 0 原文

梦断已成空 2024-12-09 09:36:53

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

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

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

Check out CSS at-rules. They allow you to specify maximum and mimimum widths for a "namespace" of CSS rules, inside which you can have different rules for smaller screens. But be careful when using those, since IE doesn't like to support good things.

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

On a project I'm working on, we actually redirect to a mobile version of the page if the user-agent contains certain keywords(check out the HTTP headers from JS), and use a different stylesheet completely.

回复收藏 0 原文

初见 2024-12-09 09:36:53

您可以使用 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 */
}

更多信息：

You can use css media queries to target different screen resolutions. eg:

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

More info:

回复收藏 0 原文