0

私は現在、テーマを使用して SkinA または SkinB としてスキンする Web アプリケーションを持っています。これまで、これはモバイル デバイスに焦点を当てていない Web アプリケーションであったため、site.css ファイル (両方のテーマ フォルダー内) は通常のデスクトップ デバイスを対象としていました。

ただし、プロジェクト全体で Web フォームの aspx ファイルを変更することなく、この site.css ファイル (両方のテーマ用) のモバイル バージョンを作成する必要があります。モバイルデバイス。

かなり論理的に聞こえる記事で次のスニペットを見つけましたが、テーマフォルダーが使用されているため (テーマについてほとんど理解していないため、すべての CSS ファイルが自動的に含まれると思います)、どうすれば達成できるかわかりませんこれ。

抜粋: http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/#mobile-stylesheets

まず、2 つのスタイルシートを定義します。通常のブラウザー用のすべてを含む screen.css と、モバイル デバイスで不要なスタイルを上書きする antiscreen.css です。これら 2 つのスタイルシートを別のスタイルシート core.css で結合します。

@import url("screen.css");
@import url("antiscreen.css") handheld;
@import url("antiscreen.css") only screen and (max-device-width:480px);

最後に、別のスタイルシート handheld.css を定義して、モバイル ブラウザー用のスタイルを追加し、ページにリンクします。

<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>

それとも、テーマの使用を維持しながら、これを達成するためのより良い方法がありますか?

4

1 に答える 1

0

私は現在行っているプロジェクトでこれに出くわしました。

これを行う 1 つの方法は、Modernizr を使用することです。

これは、modernizr.com で入手できる JavaScript ライブラリです。

宛先ブラウザーをテストし、タッチ イベントをサポートしている場合は、Web ページの要素に「タッチ」のスタイルを追加します。通常、Modernizr がこれを行う場合、それはタブレットまたは電話です。次に、電話/タブレットの CSS の各スタイルの前に「.touch」を付けます。

これをメディア クエリと組み合わせると、ほとんどの (おそらくすべてではない) デバイスを処理できるはずです。

于 2013-02-28T14:40:33.520 に答える