-1

我有一个我正在尝试使用移动版本构建的网站,使用 CSS 媒体查询以在 HTML 中建立这两个:

<link id="fullcss" title="desktop version" rel='stylesheet' type='text/css' media="only screen and (min-device-width:481px)" href='desktopstyle.css' />

<link id="mobicss" title="mobile version" rel='alternate stylesheet' type='text/css'  media="only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (max-device-width: 480px)" href='mobistyle.css' />

移动媒体查询之所以如此之大,是因为我已经对所有高分辨率手机以及典型的 iPhone 进行了射击。

在我的身体里,我有两个链接:

<a id="css-full" href="#desktop">Desktop View</a>
<a id="css-mobi" href="#mobile">Mobile View</a>

我想根据当前工作表显示/隐藏(它在 CSS 中)。

我正在尝试使用 jQuery 或 Javascript 为用户提供在移动设备上切换到桌面样式表的选项,反之亦然。目前,它看起来像这样:

jQuery(document).ready(function($){
/* CSS switch */
$("#css-full").click(function(){
    $("#fullcss").attr(href, "desktopstyle.css");
    $("#mobicss").attr(href, "desktopstyle.css");
});
$("#css-mobi").click(function(){
    $("#mobicss").attr(href, "mobistyle.css");
    $("#fullcss").attr(href, "mobistyle.css");
});
});

我对 jQuery 不是很熟悉,所以显然这对我不起作用。解决这个问题的最佳方法是什么?遗憾的是,我不能使用 PHP。

谢谢!

4

1 回答 1

0

尝试在代码中引用“href”属性

$("#fullcss").attr('href', "desktopstyle.css");
$("#mobicss").attr('href', "desktopstyle.css");
于 2012-06-28T17:50:10.107 回答