使用鐵媒體查詢和DOM - 如果聚合物1.0

Question

我正在使用鐵媒體查詢來顯示工具欄菜單項使用聚合物1.0，但它不是在移動設備上按預期呈現。

如果我調整桌面Web瀏覽器（谷歌瀏覽器）的大小，但如果我在手機上加載頁面，則菜單顯示效果不錯。注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應爲360像素X 640像素的設備http://viewportsizes.com/?filter=note%203

此外，請務必在標題中包含處理：

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