我可以使用智能手机（iOS或Android）浏览我的Github页面，但是以某种方式，我不确定发生了什么事情，导致我的智能手机再也看不到任何东西了。起初，我以为是比例尺问题，但我将图片和一些按钮居中，因此我应该可以在智能手机的屏幕上看到它们。我的Github页面显示不正确吗？
我用笔记本电脑浏览Github页面，一切看起来都很好，但不是手机。不幸的是，无论如何我都必须使用移动设备访问Github页面。
这是页面的链接：GitHub page
这是我的iPhone中的照片：
以下是我的html5代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>MindScribe</title>
<!--<meta name="description" content="An interactive getting started guide for Brackets.">-->
<!-- Maybe I need. Note that Android and iOS ignore media="handheld"-->
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
<link rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">
<!-- media="handheld" trick for Windows Mobile -->
<link rel="stylesheet" href="screen.css" media="Screen">
<link rel="stylesheet" href="mobile.css" media="handheld">
<!-- sans serif-->
<!--smartphone conpatible-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<!--For iPhone -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- Home screen icon -->
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<a href="javascript:location.reload(true)"><img src="image/MindScribe-cursive.png" id="cursive"></a>
</div>
<div id="container">
<picture>
<img src="image/MindScribe-zebra.png" id="ImageEnterVariables" alt="Hello, I'm Stripes">
<img src="image/MindScribe-zebra2.png" id="onlyShowZebraImage" alt="Hello, I'm Stripes" style=display:none>
</picture>
<select id="languageSelection" style=display:none >
<option value="" disabled selected >Please choose a language</option>
<option value="1">English (American)</option>
<option value="2">Chinese (Mandarin)</option>
<option value="3">Japanese</option>
<option value="4">Spanish</option>
</select>
</div>
</div>
</body>
最佳答案
问题不仅存在于手机中，如果将浏览器窗口的大小调整为小于或等于768像素，则main.css中针对@media (max-width: 768px)的规则就会生效，内容就会消失：
body {
position: relative; /* REMOVE THIS RULE*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
max-width: 800px;
bottom: 500px;
box-sizing: border-box;
overflow: hidden;
}
问题似乎出在应用于
position:relative的body规则上，因为它更改了页面流，将其删除，并且内容对于max-width: 768px也应该可见。关于css - 为什么我的智能手机不再显示Github页面？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47641333/