为什么我的智能 phone 不再呈现 Github 页面？

Question

我用我的智能 phone（iOS 或 Android）浏览我的 Github 页面很好，但不知何故，我不确定发生了什么我在我的智能 phone 中再也看不到任何东西了。起初，我以为是比例问题，但我将图片和一些按钮居中，所以我应该可以在智能 phone 的屏幕上看到它们。我的 Github 页面没有正确呈现吗？

我用笔记本电脑浏览 Github 页面，一切正常，但就是不正常 phone。不幸的是，无论如何我都必须使用移动设备访问 Github 页面。

这是页面的 link：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>

Answer 1

问题不仅出在您的 phone，如果您将浏览器 window 的大小调整为小于或等于 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;
}

问题似乎与应用到 body 的 position:relative 规则有关，因为它改变了页面流，删除它并且内容应该也对 max-width: 768px 可见。

为什么我的智能 phone 不再呈现 Github 页面？

Why my smart phone does not render Github page anymore?

html

css

github-pages