-1

HTMLで2つを確立するためにCSSメディアクエリを使用して、モバイルバージョンで構築しようとしているWebサイトがあります。

<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 と一緒にすべての高解像度携帯電話をショットガンで撃ったからです。

私の体には2つのリンクがあります：

<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 に答える