2014-04-24 53 views
0

我做了针对移动设备优化的样式表为使用客户端站点:如何手动覆盖CSS @media查询?

<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 768px)" href="css/mobile.css" /> 

这工作得很好,但他们要求的链接,将显示其原始的,完整的页面格式的网站。

有谁知道一种方法来重新加载网站并覆盖上面的媒体查询?是唯一的方法来做到这一点与JavaScript?

+1

要么是这样做,要么是在渲染页面时,如果页面是动态生成的,则服务器根本不输出移动样式表。 – BoltClock

回答

0

就我个人而言,我赞成一个解决方案,样式表链接通过用户选择触发的页面后面的代码中的某些逻辑有条件呈现。它不是那么干净,但你也可以通过使用一些JavaScript来实现。也许沿着给予样式表中的行链接一个id:

<link id="mobilestyles" rel="stylesheet" type="text/css" media="screen and (max-device-width : 768px)" href="css/mobile.css" />

然后调用一个函数从一个按钮的事件处理程序禁用样式表:

jQuery的

$("#mobilestyles").remove(); 

平原JS

document.mobilestyles[0].disabled = true; 

然后您可以存储e用户选择为cookie并记住这一点以供将来访问。

+0

谢谢!我结束了使用道具:\t $('link [title = moboptcss]')。prop('disabled',true);并将其附加到单击事件 – MeltingDog

+0

好东西:)很高兴我可以帮帮我 –

0

仅当您有权访问页面渲染时才可以使用链接。我认为只使用简单的链接,这是不可能的。您可以支持alternate styles。这使得用户可以在他的浏览器中选择想要的布局。

编辑: 在“BoltClock”发现它可能缺乏移动浏览器支持后,您仍然可以使用它并通过javascript选择样式。但这是接近“梅洛特”

+1

是否有任何移动浏览器可让您从一组替代样式表中进行选择? – BoltClock

+0

呵呵,你是对的。这是关于未使用的标准。我刚刚在我的android手机上试过镀铬。没有支持。但即使在Windows铬我找不到按钮来改变风格。在Windows的Firefox(我更喜欢使用)有支持。 :, - ( –