5

私は最近、Web サイトのモバイル バージョンを開発しており、ブラウザがモバイル デバイス上にあることが検出された場合に CSS ファイルを変更できるようにしたいと考えています。以前の試みはこちらでご覧いただけますが、これを実現する最も現実的な方法は、メディア クエリに焦点を当てることであると判断しました。

ここでの問題は、メディア クエリがまったく機能しないことです。常にデフォルトのスタイルシートをロードします。ここに私が持っているコードがあります:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="../css/style.css" id="stylesheet" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="../css/style_mob.css" />

このコードで何かを見逃していませんか? このために提供されている多くのチュートリアルを使用してみましたが、役に立たないようです。私はここで本当に行き止まりになったので、どんな助けも大歓迎です。

4

4 に答える 4

6

デフォルトのスタイルシートには、ロードを停止する属性はありません。

あなたはそれを与えることができますmedia="screen and (min-width: 481px)"、しかしそれは危険につながります、古いブラウザもそれをロードしないでしょう。

通常は、デフォルトのスタイルシートをロードし、モバイルスタイルシートがデフォルトのスタイルシートから不要なものを上書きすることを確認するのが最善です。

于 2011-04-11T09:23:47.687 に答える
2

条件付きを完了するとmin-device-width、iOSでうまくいきました。デバイスという言葉に注意してください。ただし、デバイスという単語がなくても、アンドロイドでは問題なく動作しました。

于 2012-07-23T14:30:21.097 に答える
1

initial-scale=1.0とがある場合、同様maximum-scale=1.0に持つのは少し冗長です。user-scalable=0maximum-scale を initial-scale に設定すると、ユーザーは最大ズームから開始するため、まったくズームインできなくなります。

于 2014-02-18T14:12:50.123 に答える
1

プレス サイトでブートストラップを使用しましたが、IE8 では機能しませんでした。css3-mediaqueries.js javascript を使用しましたが、まだ機能していません。メディア クエリをこの JavaScript ファイルで動作させたい場合は、css のメディア クエリ行に screen を追加します。

ここに例があります：

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="css3-mediaqueries.js"></script>

<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

css 上記の行と同じくらい単純なリンク行。

于 2013-08-31T10:12:31.090 に答える