Question

我正在尝试使用聚合物构建一个响应式网站，但出于某种原因，某些元素（核心工具栏和纸制品）不能在更小，更密集的屏幕上进行缩放（请参阅智能手机）。从我在网上看过的项目（IE：https://www.polymer-project.org，https://www.youtube.com/watch?v=ZAc51_0Xa_M）看来，我是唯一一个遇到这个问题的人，所以我想我错过了什么

这里是我的代码以及两个屏幕截图，一个来自我的智能手机，另一个来自我的电脑。

<html>
<head>
    <meta charset="utf-8">
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
    <!--<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">-->
    <link rel="import" href="bower_components/core-icons/core-icons.html">
    <link rel="import" href="bower_components/paper-fab/paper-fab.html">

    <style>
    body {
        font-family: Roboto;
    }

    core-toolbar {
        background-color: #03b7d3;
        color: white;
    }

    .mainFab {
        z-index:100;
        background-color: #ff5c9d;
        /*position: absolute;*/
        top: 70px;
        right: 16px;*/
    }

    </style>

</head>

<body fullbleed layout vertical>
    <core-header-panel flex>
        <core-toolbar class="medium-tall" core-narrow>
            <div>Gabriele Musco</div>
            <span flex></span>
            <paper-fab icon="toc" class="mainFab"></paper-fab>
        </core-toolbar>
        <!--content goes here-->

    </core-header-panel>


</body>

PC Screenshot

Smartphone Screenshot

Answer 1

刚刚解决了这个在我的html

的头部添加这两行的问题

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

聚合物元素没有响应

1 个答案: