0

ウェブサイトのモバイル版を作成しています。

画面サイズに関連する css でこれらのコードを使用しました。

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="phone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="pad.css" />

これらの CSS コードは、iPhone、iPod touch、さらには iPad でも問題なく使用できるようになりました。私のアンドロイド（サムスンギャラクシーy）でこれをテストすると、デバイスの画面幅が原因で、ページの横向きのブロックがほとんどのデザインから外れます。別のリンク タイプ コードを追加する方法はありますが、Android ユーザーをターゲットにしていますか? またはios以外の何か？

コードを自動に変更して、実行するすべてのデバイスに適合させることができますか? （誰かがそれを述べる前に、上記の2つのcssでautoを選択できることを知っていることに注意してください。しかし、それは正しく見えないため、3番目のcssページが必要な理由です）。

4

1 に答える 1

0

あなたの質問を正しく理解したかどうかはわかりませんが、理解できた場合は次のようになります。

var userAgent = navigator.userAgent.toLowerCase(); //get the user agent
var android = (userAgent.indexOf("android") != -1);
if(android) { //if client is running Android
    document.head.innerHTML += "<link.../>"; //add an Android-specific stylesheet
}
else {
    document.head.innerHTML += "<link.../>"; //use the regular stylesheet otherwise
}

注:<link>最初にを削除し、JavaScript に追加させる必要があります。

于 2012-09-08T18:01:26.247 に答える