Php 在移动设备中检测使用站点的客户端

我们可以使用PHP检测客户端的操作系统，它是移动的、Android的或Windows的，以显示站点的设计响应

我用过,

CSS

@media screen and (min-width: 1200px) {
     /*
         Detected PC.
     */
}
@media screen and (min-width: 500px) {
     /*
         Detected Mobile or PC.
     */
}

但我不想在同一个页面中编写这两个CSS，而是想用PHP加载它们

PHP

<?php
    $is_pc = ???; //Don't know what to write.
    if ($is_pc) {
       echo '<link href="pc.css" rel="stylesheet">';
    } else {
       echo '<link href="mobile.css" rel="stylesheet">';
    }
?>

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(!preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) {
    echo '<link href="pc.css" rel="stylesheet">';
    } else {
    echo '<link href="mobile.css" rel="stylesheet">';
    }
?>

---

不好的做法和主要的，但不是唯一的，是：

如果您选择witch CSS加载服务器端，您将无法在平板电脑上处理垂直和水平模式之间的切换（hz=桌面视图；vt=移动模式），因为您将无法重新加载页面

这就是为什么您应该同时在CSS中加载这两个媒体查询


如果您想做出相同的行为，请使用以下方法：

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mobile.css" />
<link rel="stylesheet" media="screen and (min-width: 768px)" href="pc.css" /> 


我得到了答案

经过对HTTP\u USER\u AGENT的长期研究

我明白了：

PHP

<?php
    $is_pc = ???; //Don't know what to write.
    if ($is_pc) {
       echo '<link href="pc.css" rel="stylesheet">';
    } else {
       echo '<link href="mobile.css" rel="stylesheet">';
    }
?>

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(!preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) {
    echo '<link href="pc.css" rel="stylesheet">';
    } else {
    echo '<link href="mobile.css" rel="stylesheet">';
    }
?>

---

我的建议是使用javascript的客户端。 首先需要一种检测客户端窗口的方法。mobileAndTabletcheck（）

接下来，您需要使用ajax来读取样式，loadCSS（文件，回调）

最后你得到了

if(window.mobileAndTabletcheck()){
loadCSS("mobile.css",function(){console.log('loaded mobile');});}else{
loadCSS("pc.css",function(){console.log('loaded pc');});}

---

在head标记中，您将加载样式。

您不需要知道操作系统，只需要知道正在使用的窗口/视口的大小。然后，您的媒体查询可以处理所需的变化。要想看到不同的解决方案，只需回答：不。您试图做的是用户代理嗅探，这与响应式设计恰恰相反。在响应式设计中，您包括所有CSS，使其在任何大小下都能正常工作，并让浏览器自行解决。嗅探服务器上的代理并返回不同的内容，这会消耗浏览器“自行解决问题”的能力，并导致比解决问题更多的问题。CSS大小非常小，特别是一旦Gzip，如果您尝试通过手机进行选择，您的站点实际上不会响应（如果有人转动手机会发生什么情况）. 除了带宽之外，还有什么原因你不想同时发送这两个文件吗？

我不想在同一个页面中同时编写两个CSS

如果你真的需要两个文件的话，把它们放在两个页面中同时发送。如果大小很重要（如果你看一张图片，巫婆很愚蠢），压缩你的CSS。不，请不要。这是违反谷歌良好做法的，将关闭你网站底部的谷歌搜索结果；对于任何匿名用户代理都将失败；你不知道的新UA也是如此；不处理窗口的大小调整；平板电脑上的水平和垂直切换相同；而且可能会杀死独角兽宝宝……或者你也可以在

style

标记中使用

media

query属性，让浏览器知道它需要哪个样式表。。。！？直截了当地说，但这给了你更多的控制，因为你现在有了这个功能Calback@DusanKrstic它只是给你一个很大的延迟，在显示的风格。。。并且使用与OP在PHP中使用的相同的基于用户代理的东西：我们说这是一种不好的做法，您应该在媒体查询中使用windows权重，而不是UA。