Question

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

我想要做的是有两个可以加载的单独样式表;一个用于移动用户，一个用于所有其他用户。我试图寻找可能的解决方案，但似乎没有一个与我想做的完全匹配。我担心如果我选择基于屏幕分辨率的样式表，那么使用1080p显示器的高端智能手机上的用户将获得该网站的桌面版本。我想通过仅向移动用户提供移动网站来避免这种情况，无论屏幕分辨率如何。如果可能的话，我宁愿为所有移动操作系统提供仅限CSS的解决方案，以防用户禁用他们的JavaScript。

Answer 1

您可以在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。

您可以从这里获得参考：

Answer 2

你能试试吗

以下是在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);

?>

要克服设计问题，可以使用bootstrap

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

2 个答案: