メテオ - 角度2 Flexのレイアウトモバイル問題

私は流星で開発しています - Angular2は、画面サイズがより小さい520pxに行くとき、私は応答結果をしたい角度2のフレックスレイアウトメテオ - 角度2 Flexのレイアウトモバイル問題

を使用します。

それはちょうど私の画面のサイズを変更するだけでなく動作しますが、実際のデバイスやクロムのデバイスのツールバーを使用すると、それは吸うに行く..

ここでは、結果の私のスクリーンショットである、とのコード

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'demo-responsive-layout-direction', 
    template: ` 
     <div class="containerX"> 
      <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlex class="coloredContainerX box" > 
      <div fxFlex> I'm above on mobile, and to the left on larger devices. </div> 
      <div fxFlex> I'm below on mobile, and to the right on larger devices. </div> 
      </div> 
     </div> 
    ` 
}) 
export class DemoResponsiveLayoutDirection { }

結果画像

Working with Screen Resizing

Not Working with Mobile mode

出典

2017-03-25 ruucm

をあなたのmain.htmlとこのmetaタグを追加する（またはindex.htmlを）のために適切にモバイルデバイスを検出する必要がありますあなたの質問によると、あなたのメディアクエリのしきい値500pxを上回る510pxの幅です（ただし、50％のズームで表示されます）。 – ghybs

申し訳ありませんが私のミスタイプ（私は500から520pxに変更しました）。しかし、実際の問題は、同じコードが実際のデバイスやクロムデバイスのトグルでは機能しないということです。 – ruucm

私はこの問題を自分で解決しました！

あなたはあなたの第二のスクリーンショット（「モバイル」モード）で（だけでなく、画面サイズを）あなたのビューポートを

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Your Site Title</title> 
</head>

出典

2017-03-25 20:02:34 ruucm

メテオ - 角度2 Flexのレイアウトモバイル問題

答えて

関連する問題