2

可能重复：
CSS 媒体类型：如何为移动设备加载 CSS？

我正在进行一个项目，您可以在源代码中看到我使用的所有代码。

在主页上有一个轻量级的 javascript 滑块，问题是由于某种原因它在移动设备上使用时不显示。那么任何人都可以帮我想出一个解决方案，或者告诉我如果在手机上查看它，我该如何展示不同的东西？

为了显示不同的 IE 样式，我使用了这个：

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

手机有类似的吗？？

4

4 回答 4

8

您可以为此使用媒体查询：http: //www.w3.org/TR/css3-mediaqueries/

基本上它看起来像这样：

@media only screen and (max-device-width: 480px) {
   /* .... styles */
}
于 2012-06-08T08:50:50.973 回答
0

要使用 PHP 执行此操作，您可以使用类似于以下内容的内容：

// check if user agent is mobile
function isOnMobile()
{
  // match popular mobile devices
  if (preg_match('/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|mobi|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo|mobile/', strtolower($_SERVER['HTTP_USER_AGENT'])))
  {
    return TRUE;
  }
  return FALSE;
}
于 2012-06-08T08:52:03.917 回答
0

尝试使用媒体查询：

@media (max-device-width: 500px) {

}
@media (min-device-width: 500px) {

}
于 2012-06-08T08:54:17.617 回答
0

有些人认为浏览器嗅探是一种不好的做法，因此媒体查询可能是一个很好的解决方案。

从我的角度来看，由于移动设备也有不同的浏览器，并且每个浏览器的行为都不同（特别是黑莓设备）。您将需要对媒体查询进行浏览器嗅探。

每个移动设备都有不同的屏幕分辨率，因此您需要为每个要支持的移动设备提供不同的 css 条件。

此链接上有一个非常好的教程。

如何使用媒体查询

分辨率特定的样式表

Javascript 浏览器检测

于 2012-06-08T09:04:47.780 回答