Question

我正在开发一个响应式网站。问题是，我不希望网站响应开始执行响应，直到用户授予浏览响应式网站的权限。

当用户在平板电脑上浏览网站时，会显示按摩或链接，要求用户更改为响应[我可以执行此部分]

我相信可以使用jQuery和CSS完成此操作。但我不确定这是一个好方法。我需要一些指导

Answer 1

您可以在用户批准后添加自适应CSS文件（即包含所有@media查询的文件）：

if (confirm('Make responsive?')) {
    $('head').append('<link rel="stylesheet" href="responsive.css" type="text/css" />');
}

一般来说，没有必要要求用户使网站响应。如果您已正确找出目标设备，只需应用样式。

Answer 2

是的，您可以将所有响应式css放入响应式css文件中，然后只询问您的用户是否需要响应。

如果用户说是，则只需添加ref行将css附加到文档，浏览器将重新解释包含的css文档

<a onclick="makeresponsive()"> 
<script type="text/javascript">
function makeresponsive()
{   
$('head').append('<link rel="stylesheet" href="responsive.css" type="text/css" />');
}
</script>

Answer 3

最简单的方法可能是使用body.class选择器为所有响应式样式添加前缀，例如。 body.responsive。所以

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

变为

@media (max-width: 600px) {
  body.responsive .sidebar {
    display: none;
  }
}

如果用户希望网站具有响应能力，您可以将responsive类添加到body元素中，然后您的样式生效。

$('body').addClass('responsive')

在用户授予权限后，是否可以使网站响应

3 个答案: