我有一个我正在尝试使用移动版本构建的网站,使用 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。
谢谢!