Question

我创建了一个新的polymer网站，如果我在手机上打开它，则响应式设计无效。（但我应该因为它是纸抽屉面板）

代码：

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="stylesheet" href="css/style.css">

    <link rel="import" href="elements/elements.html">
</head>
<body>
    <home-main>
        <login-main>
        </login-main>
    </home-main>

</body>
</html>

模块：

<dom-module id="home-main">

<template>
    <style>
    </style>

    <paper-drawer-panel id="pdp">
        <div drawer style="background-color: #dfdfdf;">

        </div>
        <div main>
            <paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
            </paper-toolbar>

            <content></content>
        </div>
    </paper-drawer-panel>
</template>

<script>

    Polymer({
        is: "home-main"
    });

</script>

</dom-module>

我的问题在哪里？对不起，我是聚合物的新人。

提前致谢;）

Answer 1

您的布局确实具有响应性，但如果您向HTML <head>添加了正确的元标记，则在移动设备上看起来可能会更好。试试这个：

<head>
    <!-- Add this -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="stylesheet" href="css/style.css">

    <link rel="import" href="elements/elements.html">
</head>

纸张抽屉面板上的响应布局不起作用

1 个答案: