0

我正在使用 Iron-media-query 来使用 Polymer 1.0 显示工具栏菜单项，但它没有按预期在移动设备上呈现。

如果我调整桌面网络浏览器（Google Chrome）的大小，菜单会很好地呈现，但如果我在手机 Note 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>
4

1 回答 1

0

使用像素的媒体查询基于手机视口，因此注释 3 应被视为 360px x 640px 设备http://viewportsizes.com/?filter=note%203

另外，请确保在标题中包含：

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

于 2015-06-07T07:11:24.050 回答