そのため、ほとんどの場合、私のスタイルシートは適切に表示されます。標準/オリジナルのものは常に問題なく動作しますが、モバイル デバイスから見ると、モバイルのものは無視されることがあります。
以下のように指定しています。
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 799px)" />
私は Droid X を使用して縦向きモードでページを表示しているため、デバイスの幅は上記で指定した最大幅を超えてはいけませんが、ランダムに元の CSS ページに戻ってしまうことがあります。
そうならないようにする方法はありますか？
standard.css が、mobile.css で期待されるカスケードに影響を与えていないことを確認してください。モバイル デバイスが最初に standard.css をロードしてから mobile.css をロードするように見えるため、両方のスタイルシートのスタイルが表示に影響を与えています。私は通常、両方のスタイルシートを同時にではなく、モバイル スタイルシートをモバイル デバイスに表示するだけのロジックで、スタイルシート リンク要素をラップします。
また、ページがデバイスのサイズに合わせて正しくスケーリングされていることを確認するために、次のメタ タグを含めることを忘れないでください。
<meta name="viewport" content="width=device-width" />
メディア タイプ「ハンドヘルド」を使用してみてください。
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
私は前にそれが起こるのを見たことがあります。変更されたのは body 要素のサイズだったと思います。正しい doctype が重要です。そのはず：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
standard.css に media="screen" を使用しますか? 多分それは役に立ちます（：
または、サーバー側でユーザーエージェントを確認してください。モバイル デバイスの場合はモバイル css のみを読み込み、それ以外の場合は standard.css を読み込みます。
WURFL を使用して、モバイル デバイスかどうかを調べます...