使用Iron-Media-Query和dom-if Polymer 1.0

Question

我正在使用iron-media-query來使用Polymer 1.0顯示工具欄菜單項，但它未按預期在移動設備上呈現。

如果我調整桌面網絡瀏覽器（Google Chrome）的大小，則菜單的渲染效果很好，但是如果我將頁面加載到手機的注3中，則該菜單將不遵守規則。 可能是我做錯了什么。

<iron-media-query query="(min-width: 750px)" query-matches="{{ isBigWidth }}"></iron-media-query>
<iron-media-query query="(min-width: 600px)" query-matches="{{ isMediumWidth }}"></iron-media-query>
<template is="dom-if" if="{{ isBigWidth }}">
        <a href="/">
            <paper-button>
                <iron-icon icon="settings"></iron-icon>
                <span class="vertical-align">Settings</span>
            </paper-button>
        </a>
        <a href="/">
            <paper-button>
                <iron-icon icon="settings"></iron-icon>
                <span class="vertical-align">Settings</span>
            </paper-button>
        </a>
        <a href="/">
            <paper-button>
                <iron-icon icon="settings"></iron-icon>
                <span class="vertical-align">Settings</span>
            </paper-button>
        </a>
</template>
<template is="dom-if" if="{{ !isBigWidth  }}">
    <template is="dom-if" if="{{ isMediumWidth  }}">
        <a href="/">
            <paper-button>
                <span class="vertical-align">Settings</span>
            </paper-button>
        </a>
        <a href="/">
            <paper-button>
                <span class="vertical-align">Settings</span>
            </paper-button>
        </a>
        <a href="/">
            <paper-button>
                <span class="vertical-align">Settings</span>
            </paper-button>
        </a>
    </template>
</template>
<template is="dom-if" if="{{ !isMediumWidth }}">
    <paper-icon-button icon="more-vert"  id="icon_button2"></paper-icon-button>
</template>

Answer 1

使用像素的媒體查詢基於電話視口，因此應將note 3視為360px x 640px的設備http://viewportsizes.com/?filter=note%203

另外，請確保在標題中包括：

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