Блог

Главная - Вопросы по программированию - Адаптивный HTML-код не отображается на iPhone, но отображается в инструментах разработчика Chrome и мобильном устройстве Safari, да, у меня есть окно просмотра

Адаптивный HTML-код не отображается на iPhone, но отображается в инструментах разработчика Chrome и мобильном устройстве Safari, да, у меня есть окно просмотра

#html #css

Вопрос:

действительно новый пользователь, надеюсь, я публикую это правильно.

Я пытаюсь заставить адаптивный HTML работать на моем телефоне, но я сталкиваюсь с действительно странными проблемами. Адаптивный html-код на моей странице, похоже, не работает. Еще более странно, что я скопировал страницу, и проблемы на этой странице разные, хотя код должен быть идентичным.

Я работаю над http://www.nokillshelter.net/final.html

http://www.nokillshelter.net/finalfinal.html

Оба должны быть одним и тем же кодом, но оба не используют адаптивный CSS должным образом. Я бы отправил код, но на данный момент он очень длинный. Любая помощь была бы очень признательна.

 <!DOCTYPE html>

<html lang="en-us" class="no-js">

<head>
<meta charset="utf-8">
<title>NoKillShelter Music</title>
<meta name="description"
      content="NoKillShelter Music">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ================4avicons ================== -->
<!-- Standard -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon-retina-ipad.png">
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon-retina-iphone.png">
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon-standard-ipad.png">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon-standard-iphone.png">

<!-- ============== Resources style ============== -->
<link rel="stylesheet" type="text/css" href="css/style-multi-scrollnew.css"/>
</head>

<body>

<div id="thelist">
    <h5>NoKillShelter Releases</h5>
    <br><img id="movinglogo" src="/img/LogoNKS-Imma.gif">
    <div id="songs">
        <a id="Longshot" href="https://awal.lnk.to/vmjynlm">
            <span>Longshot</span>
        </a>
        <br><a id="Sweetheart" href="https://awal.lnk.to/NoKillShelter-Sweetheart"><span>Sweetheart</span>
    </a>
        <br><a id="FairyQuing" href="https://awal.ffm.to/mxnkqxq">
        <span>FairyQuing</span>
    </a>
        <br><a id="JustSeeTheCoast" href="https://awal.lnk.to/JustSeetheCoast">
        <span>Just See The Coast</span>
    </a>
        <br><a id="BalancedLove" href="https://awal.lnk.to/BalancedLove">
        <span>Balanced Love</span></a>
    </div>

CSS

       /* Small Devices, Tablets @media only screen and (max-width: 768px) */

@media only screen and (max-width: 768px) {
    h1 {
        font-size: 5.5rem;
    }

    #thelist {
        top: 69px;
        font-size: 20px;
    }
    h5 {
        font-size: 2.5rem;
    }

    #movinglogo {
        max-width: 17%;
        top: 55px;
        left: -5px;
        position: absolute;
    }


    button {
        white-space: nowrap
    }

    .album {
        margin-left: 0%;
    }

    #info .content {
        padding: 0 5%;
    }

    .block-team img.team-member {
        width: 100%;
    }
}

/* Extra Small Devices, Phones @media only screen and (max-width: 480px) */
@media only screen and (max-width: 480px) {

    .album {
        margin-left: 0%;
    }

    h1 {
        font-size: 5.5rem;
    }

    #thelist {
        top: 69px;
        font-size: 20px;
    }

       #thelist button {
        whitespace: inherit;
        button-width: 200px;
        font-size: 12px;
    }

    #movinglogo {
        max-width: 17%;
        top: 55px;
        left: -5px;
        position: absolute;
    }

Комментарии:

1. Я вижу некоторые ошибки в консоли, исправьте их в первую очередь. Некоторые скрипты не могут быть загружены.

2. Это были просто сценарии Google для шрифтов, которые не были безопасными, потому что мне не хватало буквы s в https, ни малейшего представления о том, что может быть причиной этого. У меня он отображается в chrome на моем телефоне, как и должно быть, но не в safari.

Метки: , , ,