私のスマートフォンがGithubページをもうレンダリングしないのはなぜですか？

スマートフォン（iOSまたはAndroid）でGithubのページを閲覧しても問題ありませんでしたが、どういうわけか、スマートフォンに何も表示されなくなったのはどういうことか分かりません。最初はスケール問題だと思ったが、写真やボタンを中央に置くので、スマートフォンの画面でそれらを見ることができるはずだ。私の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>

出典

2017-12-04 Johnny88520

問題ではありません携帯電話でのみ、ブラウザウィンドウのサイズを768ピクセル以下に変更した場合、あなたが持っているルールはですで@media (max-width: 768px)キックのため、コンテンツが消える：それはページフローを変更し、それを削除し、コンテンツが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ルールであると思われます。

出典

2017-12-04 20:52:55

これは機能します。どうもありがとうございます！！あなたが言及したことに基づいて、私はまだ "@メディア（最大幅：768ピクセル）"を維持する必要がありますか？ – Johnny88520

さて、その部分は768ピクセル以下のサイズで使用されていますが、小さな画面（たとえば異なるフォントサイズ）に異なるスタイルを適用したい場合は、それを維持する必要があります。 –

あなたの答えをありがとう。最後にすばやい質問ですが、あなたは小さな画面を言った、あなたはスマートフォンのような意味ですか？ – Johnny88520

私のスマートフォンがGithubページをもうレンダリングしないのはなぜですか？

答えて

関連する問題