Question

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

如果我调整桌面网络浏览器（谷歌浏览器）的大小，菜单会很好地呈现，但是如果我在手机上加载页面注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

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

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

＆＃13;

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

＆＃13;

使用iron-media-query和dom-if Polymer 1.0

1 个答案: