Question

我有div0 div1和div2

它们配置为：

div0宽度：200％ div1位于div0内部，宽度为：50％（div0） div2在div0内部，宽度为：50％（div0）

在我的电脑上运行良好。加载页面时只能看到一个div。第二个就在旁边。滚动时我可以看到它。但在我的Android手机上它显示两个div和所有较小的。因此，在加载pge时，页面中没有不可见的部分。

例如：

quizmaker.pythonanywhere.com/play/1

在计算机上，你必须等待3秒钟。

在移动设备上，一切都可见。怎么解决？

Answer 1

您需要添加一个视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这应该放在<head>。

中

<强>更新

以下是您链接的网址源代码，其中包含视口（来自上方），以及一些基本的html修补程序（添加了doctype，html和head标记）

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.full-width {
    width: 100%;
} 
#welcome{
    width: 200%;
    height: 100%;
    position:absolute;
    left:0%;
}
#welcome:target{
    left: -100%;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -ms-transition: all 0.6s;
}

#welcome > .main{
    width:50%;
    height:100%;
    position:absolute;
    left:0%;
}
#welcome > .continue{
    width:50%;
    height:100%;
    position:absolute;
    left:50%;
}

/* #welcome > .main > .q {
    position: relative;
    left: 25%;
} */

</style>
</head>
<body onload="timer=setTimeout(function(){ window.location='#welcome';}, 4000)">

<div id="welcome">
    <div class="main">
        <img class="q" src="/static/quiz.png" />
        <h2>ASapplications QuizMaker</h2>
        <br><h4>Faminator's quiz</h4>
    </div>
    <div class="continue"><h3>Please Wait...</h3></div>
</div>
</body>
</html>

CSS两个宽度为100％的div在它们旁边没有工作

1 个答案: