既存のWebページをモバイルCSSで更新する

Question

モバイル固有のCSSを既存のWebページに追加するにはどうすればよいですか？

要件は以下のとおりです。

• 非モバイルブラウザビューは
• モバイルブラウザは
• モバイルブラウザの（つまり、特定の要素を削除し、ページを簡素化します）異なるCSSを取得する必要があるとして、とどまるべき興味があります：iPhoneとAndroid。 win7のとWebOSとは、私は長期的にHTML5Mobileの定型文や他のさまざまなソリューションを探していますが、短期のために私が探してい

小さな変化の数より良い

をぐるぐるしていいだろう低労力のCSSベースのソリューションです。

（私は別のページを提供するのではなく）クライアント側の唯一のソリューションを望んでいます。

おすすめです？私を助けるライブラリ/記事/コードスニペットはありますか？

Answer 1

これを処理するための最良の方法は、あなたが別に異なるスタイルシートを提供しましょうCSSメディアクエリであり、ブラウザの解像度と機能。主なメリットの1つは、ブラウザスニッフィングやサーバー側のコードを実行する必要がないことです。これは毎月数十の新しいデバイスが市場に出たときに維持することの悪夢です。

ブラウザスニッフィングでは、デバイスの各タイプまたはグループごとに特定の検出コードをスクリプトに追加する必要がありますが、メディアクエリはこれまで聞いたことがないデバイスでも処理します。使用中のメディアクエリーの良い例の

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { 
    body { 
     color: hotpink; 
    } 
} 

ロット：
http://responsivewebdesigns.tumblr.com/

Answer 2

これを行う最も良い方法は、phpを使用してさまざまなブラウザに異なるCSSを返すことです。
例：

<?php 
header("Content-type: text/css"); 
$browser = get_browser(); 
if($browser['platform'] == 'iPhone') 
    readfile("iPhone.css"); 
else 
    readfile("normal.css"); 

編集：
あなたにも、クライアント側でこれを行うことができます。あなたが使用できるjavascriptでクライアントを検出するには

if(navigator.userAgent.match(/iPhone/i)) 

または他のプラットフォームと同様のものを使用してください。すべて一緒に

$.include('somecss.css'); 

：あなたはjQueryInclude Manyプラグインを必要とし、その後、使用する特定のCSSを含めるには

<script> 
    if(navigator.userAgent.match(/iPhone/i)) 
     $.include('iPhone.css'); 
    else 
     $.include('Other.css'); 
</script>