为什么我的网站无法在我的手机上缩放

我已经尝试了我能想到的一切来让这种布局适合移动设备，但它似乎不想工作。我已经放了视口，元标记。我已经放了@media css 标签，仍然没有区别。

这

完全让我困惑为什么这不起作用。

以下是 HTML/CSS：

    </title>
    <style>
        @font-face {
            font-family: 'trench';
            src: url('fonts/trench100free.ttf');
        }
        .content {
            width: 480px;
            overflow: hidden;
        }
        .trench-bold {
            text-align: left;
            font-family: trench;
            font-size: 55px;
            font-weight: bold;
            color: white;
        }
        .pull {
            margin-bottom: 2px;
            font-size: 150%;
            font-family: trench;
            font-weight: bold;
            -webkit-transition: .5s ease;
            transition: .5s ease;
            width: 180px;
            padding: 5px;
            color: black;
            background-color: white;
            text-align: right;
        }
        .pull:hover{
            -webkit-transition: .5s ease;
            width: 80%;
            background-color: red;
            text-size: 175%;
            transition: .5s ease;
        }
        body {
            margin: 0px;
        }
        a {
            text-decoration: none;
            color: black;
        }
        a:active {
            color: black;
        }
        @media screen and (max-width: 400px) {  
            .content {
                width: 100%;
            }
            .pull {
                width: 50%;
            }
            .pull:hover {
                width: 90%
            }
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body background="index_background.png">
    <div class="content" align="left">
        <section class="trench-bold">/The Goust Server</section>
        <br>
        <a href="downloads.html"><div class="pull">Downloads</div></a>
        <a href="links.html"><div class="pull">Links</div></a>
        <a href="links.html"><div class="pull">About</div></a>
        <br><br><br><br>
        <section class="trench-bold">/Pages</section>
        <br>
        <a href="samsworld.html"><div class="pull">Sam's World</div></a>
    </div>
</body>

看，在触摸设备上"悬停"效果不起作用。你必须使用一些JavaScript/JQuery来实现这个效果，并相应地修改CSS和HTML代码。

[相反，您可以使用：active 代替：hover，但这将是部分解决方案。

您也可以尝试以下JS代码：

<script>
document.addEventListener("touchstart", function(){}, true);
</script>

除此之外，我强烈建议您通过以下链接，这将帮助您了解问题以及可用于实现悬停效果的各种解决方案。

http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/

J.Joe提供的链接也会有所帮助。

相关内容

最新更新

热门标签：