如何检测用户是否使用 CSS 从手机浏览我的网站？答案

【问题标题】：How can I detect if a user is browsing my site from a mobile phone using CSS?如何检测用户是否使用 CSS 从手机浏览我的网站？
【发布时间】：2015-06-07 11:12:18
【问题描述】：

我正在设计一个网站，它允许用户搜索一个项目以显示有关它的信息，或者使用下拉菜单选择两个项目并比较两者。

我想要做的是有两个可以加载的独立样式表；一种适用于移动用户，另一种适用于所有其他用户。我曾尝试寻找可能的解决方案，但似乎没有一个与我想要做的完全匹配。我担心，例如，如果我选择基于屏幕分辨率的样式表，具有 1080p 显示器的高端智能手机上的用户将获得该网站的桌面版本。我想通过只将移动网站提供给移动用户来避免这种情况，而不管屏幕分辨率如何。如果可能的话，我更喜欢所有移动操作系统的纯 CSS 解决方案，以防万一用户禁用了他们的 JavaScript。

【问题讨论】：

标签： css mobile web responsive-design

【解决方案1】：

你可以试试这个

以下是查找用户是在 PC 上还是在移动设备上的方法：

<?php

/* Mobile detection */
function is_mobile() {
  $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
  return strpos($userAgent, 'mobile');
}

/* Does the UA string indicate this is a mobile? */
if(!is_mobile()){
  $is_mobile = 'its pc';
} else {
  $is_mobile = 'Yes Mobile';
}

  echo '<pre>'; print_r($is_mobile);

?>

要克服设计问题，您可以使用引导程序

【讨论】：

这行得通，非常感谢！它不是 CSS，但 PHP 也可以满足我的需求。
不客气。只是在css方面给你一个选择。因为我们使用的是引导程序，它提供了非常方便的方式来提供移动友好的网站

【解决方案2】：

您可以在 css 中使用 Media 标签。

@media only screen and (max-device-width: 480px) {
        div#wrapper {
            width: 400px;
        }

        div#header {
            background-image: url(media-queries-phone.jpg);
            height: 93px;
            position: relative;
        }

        div#header h1 {
            font-size: 140%;
        }

        #content {
            float: none;
            width: 100%;
        }

        #navigation {
            float:none;
            width: auto;
        }
    }

这样，你可以根据不同的屏幕尺寸定义不同的css。

您可以从这里获得参考：

【讨论】：