マテリアライズグリッドs12がモバイルビューで動作しない

異なるスクリーンサイズで異なるスタイリングを持つレール上でルビーを使用してウェブサイトを構築しようとしています。そのためにmaterializecssを使用しています。以下のための問題に直面マテリアライズグリッドs12がモバイルビューで動作しない

：「divの空白」

<div class="row"> 
    <div class="col m2 l3 blank"></div> 
    <div class="col s12 m8 l6 yield"> 
    <%= yield %> 
    </div> 
    <div class="col m2 l3 blank"></div> 
</div>

は、私は50％の画面を取るためにdiv.yieldを望んでいた「のdiv歩留まり」

の左右両側に空白のためであります中型スクリーン（タブレット）の場合は66％、小型スクリーンの場合は100％のスクリーン（携帯）

私は、これを私のデスクトップのクロムブラウザでテストしたところ、望ましい結果が得られました。ウィンドウのサイズ変更時には、 'div yield'は、幅1208x600px、幅502px> 50％で100％画面サイズを使用しています。

これまでのところすべてうまくいきました。

私はクロムのモバイルエミュレーションモードに切り替えると、 'div yield'は幅< 600pxのs12クラスを受け入れず、m8クラスは幅が< 600pxのためサービスされました。以下は

左1両方の結果のスクリーンショットは、その幅は357pxに縮小され、通常モードの下クロムブラウザのです。（これは私の望ましい結果である

右1、携帯エミュレーションでクロムブラウザでありますモード、357pxに幅のセット。このM8クラスでは代わりにクラスS12で提供しています。（望ましくない）

screenshot

なぜこの出来事があり、それを修正する方法？

出典

2017-03-19 Hitesh kumar

エミュレーションモードに切り替えた後にリフレッシュしましたか？デベロッパーコンソールからは、幅が少なくとも幅601pxであるとブラウザが判断しているようだからです。 –

私はちょうどあなたのリンクを見ましたが、実際のモバイルデバイスの画面幅はレイアウトビューポートの幅と必ずしも一致しません。したがって、例えばIPhoneの場合、「cssピクセル」ごとに2つのスクリーンピクセルを使用して、効果的にメディアのクエリを750ピクセル幅の「信じる」ようにします（実際には、デバイスの）。だから小さなグリッドサイズを選んでいないのです。デバイスに依存しないピクセルで画面幅を一致させるようにページに指示する必要があります。その簡単な方法は、viewportメタタグを使用することです。したがって、<head>に以下を追加すると、レスポンシブデザインが正常に動作します。

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

出典

2017-03-20 19:57:57

それを手に入れました。私のアプリは今、完璧に動作します。 Thanx –

マテリアライズグリッドs12がモバイルビューで動作しない

答えて

関連する問題