Link 在 phone 中单击时不起作用

Question

我有下面的代码，从 phone 加载网页时 link 不工作（它只在桌面模式下工作）。有什么帮助吗？（下面也是 css 代码，页面在同一个文件上设置样式，但这无关紧要）。我从计算机上单击 link，它起作用了。我从手机 phone 点击它，它不起作用。笔记！！！前往 dogger.onlinewebshop.net 查看项目

<html>
    <head>
        <title> Acasa | Dogger.ro </title>
        <style>
            body{
                background-color: #793698;
                height: device-height;
                width: device-width;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
            
            .main{
                width: 30%;
                margin-left: 35%;
                height: 150px;
                line-height: 100%;
                margin-top: 200px;
            }
            
            .main h1{
                color: #fff;
                font-family: sans-serif;
                font-size: 50px;
            }
            
            .main a{
                text-decoration: none;
                color: #fff;
            }
            
            .main a{
                height: 50px;
                font-size: 30px;
                                font-family: sans-serif;
                margin-top: 5px;
                justify-content: center;
                align-items: center;
                text-align: center;
                border: 1px solid #fff;
                border-radius: 5px;
                color: #fff;
                background-color: #793698;
                width: 150px;
                                display: inline-block;
                                padding-top: 25px;
                
            }
            
            .main a:hover{
                background-color: #6a2f85;
            }
            
            .adspace img{
                margin-top: 100px;
                height: 100px;
                width: 60%;
                border: 1px solid #f1f1f1;
                border-radius: 10px;
            }
                        @media only screen and (max-width:1080px){
                                .main{
                                        margin-top: 50%;
                                }
                                
                                .main h1{
                                        font-size: 100px;
                                }
                                
                                .main a{
                                        height: 100px;
                                        font-size: 50px;
                                        margin-top: 100px;
                                        width: 300px;
                                        padding-top: 75px;
                                }
                                .adspace img{
                                        float: bottom;
                                        margin-top: 85%;
                                        width: 80%;
                                        height: 120px;
                                }
                        }
        </style>
    </head>
    <body>
        <div class = "main">
            <h1> dogger </h1>
            <a href = "main.php"> enter </a>
        </div>
        <div class = "adspace">
            <img src = "https://picsum.photos/1200/200">
        </div>
    </body>
</html>

Answer 1

您的 div 称为 adspace（图片）挡住了按钮，（它在它前面）。您需要使用 CSS height 将其样式设置得更短，或者您可以使用 CSS z-index.

将其推到后面

Link 在 phone 中单击时不起作用

Link is not working when clicked from phone

html

css

href