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

Change style if website is viewed on a mobile device

本文关键字：网站 样式 移动 如果      更新时间：2023-09-26

可能的重复项：
CSS媒体类型：如何加载移动版CSS？

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

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

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

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

移动设备有类似的东西吗？

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

基本上它看起来像这样：

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

尝试使用媒体查询：

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

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

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

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

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

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

如何使用媒体查询

分辨率特定的样式表

Javascript 浏览器检测

相关文章：