デバイスに基づいたdivのサイズ変更

Question

モバイル（特にスマートフォン）デバイスの場合は、divのサイズを変更するのに問題があります。今私が使っているモバイルデバイスはiPhone7plusです。だから、私が持っている寸法がこのデバイスのものかどうかは分かりません。

（デスクトップ用）私のオリジナルのCSSはこれです：

div#allContent div#mainContent div#contentText { 
    width:50%; 
    /*other styles*/ 
} 

ので、画面上のテキストがページの半分にあり、サインアップフォームが他の半分になります。私のiPhoneで見ると、フォームからのドロップダウンアイテムが大きすぎて、ドロップダウンボックス内のテキストを見ることができません。だから、contentText divの幅を100％にしてから、form divを100％にしようとしています。

私は私のcssファイル

の下にこれを追加私はこの最初の行しようとしました：私はそれが働いていない大きなモバイルデバイスを持っているので、

/*@media only screen and (min-device-width:320px) and (max-device-width:480px) { 
@media screen and (min-device-width:320px) and (max-device-width:480px) { 
    div#allContent div#mainContent div#contentText { 
    width:100%; 
    } 
    div#allContent div#mainContent div#signupContent { 
    width:100%; 
    } 
} 

がそれですか？私は最大値を増やすべきですか？私はモバイルデバイスのサポートを学んでいます。

Answer 1

私は、このメディアクエリーは、iphoneのポートレートモードのために働くことを願っています

@media screen and (max-width: 480px){ 

} 

メディアクエリ構文は、あなたのコード内で異なっていると思います。

Answer 2

あなたの問題は構文であるか、ターゲットを正しく選択していない可能性があります。完全なコード（HTMLとCSS）を投稿すると、より役に立ちそうです。

*-device-widthの代わりにmin-widthとmax-widthを使用することができます。

私はCodePenに例を作成しましたので、それを確認してください。

Answer 3

iパッドとメモ帳デバイスの幅が始まると、モバイルデバイスの最大幅は767になります。

@media screen and (min-device-width:320px) and (max-device-width:767px) { 
    //code comes here 
}