Question

可能重复：
CSS media type: How to load CSS for mobile?

我正处于项目中间，您可以看到我在源代码中使用的所有代码。

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

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

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

手机有类似的内容吗？

Answer 1

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

基本上它看起来像这样：

@media only screen and (max-device-width: 480px) {
   /* .... styles */
}

Answer 2

要使用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;
}

Answer 3

尝试使用媒体查询：

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

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

}

Answer 4

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

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

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

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

How to use media queries

Resolution specific style sheets

Javascript Browser Detection

如果在移动设备上查看网站，请更改样式

4 个答案: