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

Posted 2023-03-06

【中文标题】如何检测用户是不是使用 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。

【参考方案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。

您可以从这里获得参考：

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html