Избегайте начального увеличения на мобильном телефоне, стандартный метатег не помог - PullRequest
Новая
       38

Избегайте начального увеличения на мобильном телефоне, стандартный метатег не помог

0 голосов
/ 27 апреля 2020

tl; dr: Сайт автоматически увеличивается на мобильном, хотя я использовал стандартный метатег, что делать?

Привет!

Я создал адаптивную веб-страницу, но у меня возникли проблемы с метатегом. Когда я отображаю его на мобильном устройстве, он автоматически увеличивается ( снимок экрана для справки) .

Кроме того, это вызывает некоторые отступы или поля сбоку ( снимок экрана для справки) ).

Чтобы избежать этого, я попробовал типичный метатег: 

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Однако веб-страница по-прежнему увеличивается автоматически. Дизайн довольно отзывчив, со всей шириной, установленной в процентах и ​​большей в 100%.

Ссылка на саму страницу.

Чтобы уточнить, я не буду sh, чтобы полностью предотвратить пользовательское масштабирование, я просто не хочу, чтобы автоматическое увеличение c при начальной загрузке страницы.

Редактировать: Я не был уверен, что включить в HTML / CSS, поскольку эта проблема относится ко всему сайту.

Однако ниже приведена первая часть моей целевой страницы в качестве примера.

HTML

<body>

<!-- Menu -->   

<nav>
    <a href="#pageA">Home</a>
    <a href="#pageB2">Myself</a>
    <a href="#pageC">Skills</a>
    <a href="#pageD">Projects</a>
    <a href="#pageF">Contact</a>
</nav>

<!-- Landing page -->

<section id="pageA">

    <div id="LandingContainer">
        <div class="Container" style="margin: 12vh auto">   
            <header>    
                <h1>Lars Berntzen Arholm</h1>
                <hr>
                <h2>User Experience Psychologist </h2>
                <h3>Improving the world, one iteration at the time</h3>
            </header>
            <div class="Triangle">
                <a href="#pageB2">
                    <img src="Icons/Triangle.png" id="LandingTriangle" alt="Click to proceed to next page"> 
                </a>
            </div>
        </div>
    </div>
</section>

CSS: 

body {
height: 100%;
display: grid;
margin:0;}

h1 {
font-size: max(5vh, 5vw, 7vw);
margin-bottom: 1px;
display: block;
}

h2 {
font-size:5vmin;
margin-bottom: 1px;
}

h3 {
font-size:6vmin;
font-family: 'Cantarell', sans-serif;
font-weight:100;}

/*Menu*/

nav {
    background-color: white;
    position: fixed; 
    top: 0; 
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /*Antall itte kor mange sider i menyen*/
    justify-content:center;
    z-index:9999;   
}

nav li {
    list-style: none;
    display: inline;
}

nav a {
    color:black;
    text-decoration: none;
    font-family: 'Fjalla One', sans-serif;
    font-size: 3vh;
    font-weight:100;
    padding-top: 2vh;
    padding-bottom: 2vh;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.Container {
    margin-top:12vh;
    margin-left:7vw;
    margin-right:7vw;
    /*Default font settings*/
    font-family: 'Cantarell', sans-serif;
    font-weight:100;
    font-size:18px;
    display: block;
}

.Description {
    font-family: 'Cantarell', sans-serif;
}

/*Landing page*/

hr {
border: 1px solid;
margin: -0.2em auto 0 auto;
width:70%;}

#LandingContainer {
    margin: 0 auto;
    /*For å sentrere landingpage vertikalt*/
    height: 100%;
    display: flex;
    align-items: center;

}

#LandingTriangle {
    display:block;
    margin: 0 auto;
    width:50px;
    height:43px;
}
...