1

ウェブサイトのモバイル版の作り方を独学で学ぼうとしているので、基本的なことから始めました。

次のコードがあります

<body> 
You are using...
<p class="mobile">
Mobile
</p>

<p class="desktop">
Desktop
</p> 
</body>

CSSで

@media screen and (max-width: 480px)  
{    
     p.desktop {
         display:none;
     }
}

    p.mobile {
        display:none;
    }

基本的には、使用しているデバイスに応じて「モバイル」または「デスクトップ」のいずれかを表示する必要があります。デスクトップでサイトに移動すると、「デスクトップ」と表示されるので、問題ないようです。しかし、iPhoneでそうすると、まだデスクトップと表示されます。

max-width を iPhone 4S の解像度である 640px に増やしてみました。しかし、私はまだ運がありません。私は何を間違っていますか？

4

1 に答える 1

5

iOS デバイスのデフォルトのビューポートは約 1000 ピクセルです。テスト ページを表示すると、幅が 320 ピクセルに見えないことに気付くかもしれません。かなり縮小されています。

ビューポート幅をデバイスの幅に設定するビューポートmetaタグがページに必要です。head

<meta name="viewport" content="width=device-width">

配置が完了すると、@media クエリが適切に機能することがわかります (ただしp.mobile { display: block; }、「モバイル」テキストを表示するには少し手間がかかります)。

于 2012-08-02T03:57:27.560 に答える