redirect - 如何为移动网站样式表创建媒体查询？

Question

我之前被告知要使用以下内容：

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">

我想为移动访问者使用单独的样式表和 html 文档。这正常吗？我有很多元素我想从移动版本中删除，在移动网站中拥有一个网站似乎不那么复杂 - 它是自己的 html 和 CSS。

如何将上面的媒体查询用于特定于移动设备的样式表和 html？我会使用什么代码，我会把它放在哪里？

Answer 1

就我而言，您必须检测浏览器服务器端，并提供不同的页面。

PHP 伪代码示例

if(browser == mobile && !isset($_COOKIES["prefer_desktop_view"])) //Pseudo code you do the checking here
{
   $_COOKIES["is_mobile"] = true; //more pseudo code
   header("location: mobile.example.com") //redirect solution - if
}

媒体查询是特定于 CSS 的。在客户端没有办法做到这一点，即使有，客户端仍然必须下载和解析“桌面”HTML。

Answer 2

<link href="the/directory/containing/your/mobile.css type="text/css" media="handheld" rel="stylesheet" />

下一行可能是：

<link href="the/directory/containing/your/desktop.css" type="text/css" media="screen" rel="stylesheet" />

使用此方法并避免使用两个文档。相反，您正在根据用于查看该文档的设备来设置该文档的样式。