0

初めての質問なので、間違っていたらすみません。

友人のケータリング ビジネスの Web サイトをデザインしていて、順序付けられていないリストを使用して簡単なメニューを作成しました。

モバイル デバイスとタブレットの場合、次のコードを追加して、ページを縮小しました。

<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">

問題は、メニューが縮小されず、画面から外れていることです。これに対抗するために、モバイル デバイスで使用したい次のコードを使用してメニューを作成しました。

<select> 
<option value="" selected="selected">Select</option>     
<option value="index.html">Home</option> 
<option value="about.html">About us</option> 
<option value="/blogs/five-simple-steps-blog">Blog</option> 
<option value="/pages/about-us">About Us</option> 
<option value="/pages/support">Support</option> 
</select> 

<script>
$("select").change(function() {
window.location = $(this).find("option:selected").val();
});
</script>

今、私はモバイルデバイスが使用されているときにcssを使用してオリジナルを非表示にし、デスクトップが使用されているときに非表示にしたいと考えています。これを行うために、次の CSS を使用しました。

select
{
display:none;
}

@media (max-width: 960px) {
ul    { display: none; }
select { display: inline-block; }
}

ただし、なぜかiphoneでサイトを閲覧すると、通常のサイトと の両方が表示されてしまいます。誰にもアイデアはありますか？ありがとう。

4

1 に答える 1

0

メディア クエリの CSS ルールは、元の CSS ルールを上書きするほど強力ではない可能性があります。重みに関しても一致するように、両方が同じルールに一致していることを確認してください。

また、メディア クエリの css ルールに !important を追加して、これをデバッグして、本当に単なるオーバーライドの問題かどうかを確認することもできます。

于 2013-10-06T18:50:03.330 に答える