Question

我可以用我的智能手机（iOS或Android）浏览我的Github页面，但不知何故，我不知道发生了什么，我再也看不到智能手机里的任何东西了。起初，我认为这是规模问题，但我将图片和一些按钮居中，所以我应该能够在智能手机的屏幕上显示它们。我的Github页面是否未正确呈现？

我用我的笔记本电脑浏览Github页面，一切看起来都很好，但不是电话。不幸的是，我不得不使用移动设备来访问Github页面。

这是指向页面的链接：GitHub page

这是我iPhone的照片：

my iPhone view

以下是我的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

问题不仅存在于手机中，如果您将浏览器窗口的大小调整为小于或等于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的{{1}}规则，因为它会更改页面流，删除它，内容也应该对body可见。

为什么我的智能手机不再渲染Github页面了？

1 个答案: