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

std::tuple<QMap, QMap, QMap> maps (safes, mushroom, floors);

下一行可能是：

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

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

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

2 个答案: