我不确定我是否正确地问过这个问题。让我解释... 我注意到facebook是"不是"响应式网页,因为当我改变我的笔记本电脑上的浏览器宽度时,facebook.com在我做这件事时不会改变。另一方面,当我使用手机并在浏览器中运行时,facebook.com已经知道我已经使用移动设备并且它的尺寸适合我的设备。
问题: 它是如何工作的,这是优化我们网站的一种技巧吗?
答案 0 :(得分:1)
我不完全知道Facebook,但如果没有使用JavaScript或CSS媒体查询检测到的迹象,那么他们可能是以旧学校的方式进行,即使用user agent strings。
每当您向网站发出请求时,您的浏览器会在请求标头中发送一个字符串,就我的情况而言:
User-Agent: Mozilla/5.0 (X11; Linux i686; rv:32.0) Gecko/20100101 Firefox/32.0 Iceweasel/32.0a2
收到请求的服务器可以使用该字符串来了解您正在使用的操作系统和浏览器,您可以看到在我的情况下它是用于操作系统的Debian和用于浏览器的Iceweasel(= firefox),可以99%肯定我正在台式电脑上浏览。
答案 1 :(得分:0)
我相信用户代理将是您最好的选择。
navigator.userAgent
答案 2 :(得分:0)
当我们在桌面上浏览时,服务器检测到我们在桌面上,它只是发送fb的默认(桌面)索引页面,但没有响应。但另一方面,如果我们使用其他客户端,如平板电脑或移动,服务器检测到它。所以它将web documnet重定向到fb的其他移动友好页面,否则它将改变它的css,这与桌面页面不同。这意味着服务器检测我们的设备和浏览器。这种php检测之一可用于检测的脚本是:
//php technique
<?php
$agent = $_SERVER['HTTP_USER_AGENT']; // Put browser name into local variable
if (preg_match("/iPhone/", $agent)) {
header("location: iphone_home.html");
} else if (preg_match("/android/", $agent)) {
header("location: android_home.html");
}?>
//javascript technique
<script language="javascript" type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('iphone') != -1) { // iPhone Device
// If it is an iPhone put specific code to run here for iPhone users
} else if (agent.indexOf('android') != -1) { // Google phones running Android OS
// If it is a Google phone put specific code to run here for Android users
}
</script>
//php technique to detect OS and browser of user
<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
$browserArray = array(
'Windows Mobile' => 'IEMobile',
'Android Mobile' => 'Android',
'iPhone Mobile' => 'iPhone',
'Firefox' => 'Firefox',
'Google Chrome' => 'Chrome',
'Internet Explorer' => 'MSIE',
'Opera' => 'Opera',
'Safari' => 'Safari'
);
foreach ($browserArray as $k => $v) {
if (preg_match("/$v/", $agent)) {
break;
} else {
$k = "Browser Unknown";
}
}
$browser = $k;
$osArray = array(
'Windows 98' => '(Win98)|(Windows 98)',
'Windows 2000' => '(Windows 2000)|(Windows NT 5.0)',
'Windows ME' => 'Windows ME',
'Windows XP' => '(Windows XP)|(Windows NT 5.1)',
'Windows Vista' => 'Windows NT 6.0',
'Windows 7' => '(Windows NT 6.1)|(Windows NT 7.0)',
'Windows NT 4.0' => '(WinNT)|(Windows NT 4.0)|(WinNT4.0)|(Windows NT)',
'Linux' => '(X11)|(Linux)',
'Mac OS' => '(Mac_PowerPC)|(Macintosh)|(Mac OS)'
);
foreach ($osArray as $k => $v) {
if (preg_match("/$v/", $agent)) {
break;
} else {
$k = "Unknown OS";
}
}
$os = $k;
echo $agent;
echo "<h2>You are using: <em>$browser - $os</em></h2>";
?>