我通过@media 查询对我的网站进行了大量修改,以便在手机上显示非常精简。但是,我的用户要求使用该站点的桌面版本(可通过链接获得)。
更进一步,桌面站点本身也会根据分辨率通过@media 查询进行修改。我正在考虑选择一个“桌面”分辨率,比如 1440x900 并强制手机以该分辨率显示?
这可能吗,也许是通过 JavaScript?或者,可以完全禁用这些@media 查询吗?
谢谢!
我通过@media 查询对我的网站进行了大量修改,以便在手机上显示非常精简。但是,我的用户要求使用该站点的桌面版本(可通过链接获得)。
更进一步,桌面站点本身也会根据分辨率通过@media 查询进行修改。我正在考虑选择一个“桌面”分辨率,比如 1440x900 并强制手机以该分辨率显示?
这可能吗,也许是通过 JavaScript?或者,可以完全禁用这些@media 查询吗?
谢谢!
我和一个客户有同样的问题。但问题是有 120 多个 CSS 文件包含媒体查询。所以我所做的是,设置视口宽度。我在那个网站上使用了这个片段并且工作正常。使用它,您甚至可以为用户提供在响应式设计和非响应式设计之间切换的选项。
$(document).ready(function(){
$('meta[name="viewport"]').prop('content', 'width=1440');
});
注意:1440 是您首选的屏幕宽度。
希望这可以帮助 :)
我会添加一个类到您的<html>
或<body>
诸如class="force-desktop"
,然后在您的媒体选择器上添加
@media () {
body:not(.force-desktop) {
//styles
}
}
或类似的东西
没有 JQuery 的 IJas 的解决方案如下所示:
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
将任何可能需要禁用的样式放在它们自己的样式表中是最容易的,使用标题属性可以更容易地找到它们。它们可以是内联样式或链接元素到 .css 文件。
function toggleSheet(title){
var S=document.styleSheets, L=S.length, temp;
while(L){
temp=S[--L];
if(temp.title===title){
temp.disabled=!temp.disabled;
return temp;
}
}