Итак, я делаю макет HTML-кода своего приложения и использую сетки CSS, чтобы показать спонсорам, как должно выглядеть приложение, все делается мобильным с первого взгляда, но когда я загружаю его на рабочий стол, оно не ' t-версия для настольного компьютера показывает мобильную версию, но когда я использую инструмент для проверки хромов Google, я вижу веб-версию и идеи, что не так?
мой файл (обратите внимание, что он еще не закончен, и я знаю, что не создал код веб-страницы):
html{
background-color: deepskyblue;
}
.top{
display: grid;
grid-template-columns: 1fr 4fr 1fr;
padding-top: 25px;
padding-bottom: 10px;
}
.top a {
text-transform: uppercase;
color: white;
}
#top-nav a{
margin: 25px;
padding-top: 25px;
font-size: 30px;
text-indent: 60px;
text-align: left;[]
}
#top-nav{
width: 20%;
margin-top: -2px;
}
#top-name a, #top-help a{
font-size: 30px;
}
#top-name{
margin: auto;
text-align: center;
width: 60%;
}
#top-help{
width: 20%;
text-align: center;
}
.main-grid {
display: grid;
grid-template-areas:
'topApp'
'appletApps';
grid-auto-rows: minmax(50px, auto);
}
.menu-grid{
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0px 20px 0px 20px;
}
.applet-apps {
grid-area: appletApps;
}
.top-app {
grid-area: topApp;
}
.applet img{
height: auto;
width: 100%;
margin: 0;
}
.applet-title h3{
font-size: 30px;
text-transform: uppercase;
color: orange;
margin: 0;
}
.applet-title {
padding: 0px 30px 0px 30px;
font-size: 65px;
text-transform: uppercase;
color: orange;
margin: 0;
}
@media (min-width: 600px) {
.menu-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.applet-title h3{
font-size: 40px;
}
}
@media (min-width: 700px) {
.menu-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.applet-title h3{
font-size: 40px;
}
#top-nav a{
font-size: 40px;
margin: 45px;
}
#top-name a, #top-help a{
font-size: 50px;
}
#top-nav{
width: 20%;
float: left;
margin-top: 3px;
}
.top {
padding-bottom: 20px;
}
}
@media (min-width: 1025px) {
.main-grid {
grid-template-areas:
'webSide appletApps appletApps appletApps'
'webSide appletApps appletApps appletApps'
'webSide appletApps appletApps appletApps';
grid-auto-rows: minmax(auto, auto);
}
.menu-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width" />
<title>App | Canvas</title>
<link rel="apple-touch-icon" href="/img/app-icon.png">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
</head>
<body>
<div class="menuPage main-grid">
<div class="top-app top animated fadeInDown">
<div id="top-nav">
<a id="menu-button">☰</a>
</div>
<div id="top-name">
<a>Canvas</a>
</div>
<div id="top-help">
<a>?</a>
</div>
</div> <!-- Top Part of App for Mobile -->
<div class="applet-apps animated fadeInDown ">
<div class="applet-title">
<h3>Favorites</h3>
</div>
<div id="fav" class="menu-grid">
<div class="applet">
<img alt="games" src="img/applet-games.png">
</div>
<div class="applet">
<img alt="games" src="img/applet-music.png">
</div>
<div class="applet">
<img alt="games" src="img/applet-meditation.png">
</div>
</div>
<div class="applet-title">
<h3>Apps</h3>
</div>
<div id="fav" class="menu-grid">
<div class="applet">
<img alt="games" src="img/applet-games.png">
</div>
<div class="applet">
<img alt="games" src="img/applet-games.png">
</div>
</div>
</div>
</div> <!-- Menu Page -->
</body>
</html>