Question

我对响应式设计布局有疑问。我找到了一些网站：http://www.asos.com，http://havenshop.ca。当我调整浏览器大小时，它不会显示移动网站。但是当我通过手机访问时，它会显示移动网站。并且URL正在更改为m.xxx.com。我的问题是：

这是什么方法，我怎么能这样做？我的意思是没有在桌面上显示响应
如果应用此方法，是否还要检查桌面上的移动网站？

最诚挚的问候，

Answer 1

如果你考虑你的重定向实际上是如何工作的，理论上它是可以理解的 - “如果用户正在使用移动设备，则将它们重定向到移动版本的网站”。问题是，当人们访问您的网站时，他们的网络浏览器不知道“我是移动设备”还是“我是台式电脑”。相反，浏览器通过提供“用户代理”来介绍自己，其中包括浏览器名称，版本和有关您的操作系统的其他信息。

要重定向移动访问者，您需要确定他们的浏览器是否是移动设备上的网络浏览器。您可以确定访问者使用的浏览器。您还可以查看其他内容，例如屏幕分辨率以及它们是否接受移动设备常用的文件类型。下面我们列出了一些方法，您可以使用这些方法将访问者重定向到您网站的移动版本。

由于手机通常屏幕宽度较小，因此如果屏幕宽度小于或等于800像素，您可以将访问者重定向到您的移动网站。您将此代码放在主网站代码的head部分中。这样，当您的网站被访问时，javascript将看到浏览器宽度并重定向到相应的网站

您可以使用以下代码执行此操作：

<script type="text/javascript">
  <!--
  if (screen.width <= 800) {
    window.location = "http://m.domain.com";
  }
  //-->
</script>

.htaccess网址重写重定向

您可以使用.htaccess重定向根据浏览器支持的MIME类型传输访问者。例如，如果用户的浏览器接受包含WML（无线标记语言）的mime类型，则很可能是移动设备。

以下代码应放在.htaccess文件中：

RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L]

Reference网站：

Answer 2

在Php中你可以通过这种方式实现它。供参考，请检查一下 http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm

<?php if (
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
stristr($ua, "Windows CE") or
stristr($ua, "AvantGo") or
stristr($ua,"Mazingo") or
stristr($ua, "Mobile") or
stristr($ua, "T68") or
stristr($ua,"Syncalot") or
stristr($ua, "Blazer") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
  $location='mobile/index.php';
  header ('Location: '.$location);
  exit;
}
?>

Answer 3

它使用了一个名为user-agent的概念。 https://msdn.microsoft.com/en-us/library/ms537503%28v=vs.85%29.aspx 在一个坚果外壳中它很好地告诉您的浏览器是什么，如果它属于移动平台字符串，它显示移动网站，如果桌面显示桌面版

Answer 4

你可以使用JS

if（/ Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini / i.test（navigator.userAgent））{重定向到移动版}}

请参阅this question

为什么某些网站无法在桌面浏览器上测试响应？

4 个答案: