[英]Showing content based on screen resolution
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.
我做了一些研究,似乎唯一可能的方法是使用 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.
我大部分时间都在编写 PHP,所以我对 javascript 非常着迷,所以如果有人能给我提供一个简单的脚本就好了。
What i need is a javascript function like this:我需要的是这样的 javascript 函数:
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.如果 javascript 关闭,它应该只显示一些其他内容.. :) 如果有帮助,我可以安装 jquery。 Thanks
谢谢
It would be nice with examples for the html code too. html 代码的示例也很好。
you should NOT detect if the user is on a mobile device with javascript.您不应该检测用户是否在使用 javascript 的移动设备上。 i recommend you this in PHP.
我在 PHP 中向您推荐这个。 you can use [$_SERVER 'HTTP_USER_AGENT' ] and then simply parse out the string to see what kind of user agent it is.
您可以使用 [$_SERVER 'HTTP_USER_AGENT' ] 然后简单地解析出字符串以查看它是哪种类型的用户代理。 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
}
You can use css media queries to target different screen resolutions.您可以使用 css 媒体查询来定位不同的屏幕分辨率。 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:更多信息:
Check out CSS at-rules.查看 CSS 规则。 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.
它们允许您为 CSS 规则的“命名空间”指定最大和最小宽度,您可以在其中为较小的屏幕设置不同的规则。 But be careful when using those, since IE doesn't like to support good things.
但是在使用它们时要小心,因为 IE 不喜欢支持好的东西。
@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.在我正在进行的一个项目中,如果用户代理包含某些关键字(检查来自 JS 的 HTTP 标头),我们实际上会重定向到页面的移动版本,并完全使用不同的样式表。
你应该试试 CSS 媒体查询
In don't know from PHP but in .Net you can kinda detect that they are a mobile visitor and then you can redirect them to a mobile section of the site.在不知道 PHP 但在 .Net 中,您可以检测到他们是移动访问者,然后您可以将他们重定向到网站的移动部分。
Then all you really need to do is write the small site re-using your existing web controls etc. Again, unsure if you have that concept in PHP but I imagine you would.然后,您真正需要做的就是编写小站点,重新使用您现有的 Web 控件等。同样,不确定您是否在 PHP 中有这个概念,但我想您会的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.