Задать вопрос
@vGrabko99
html, css, js, php, golang, mysql
html

Почему этот код не работает в opera mobile?

Задача.
Форма по центру экрана. На пк всё норм. Запустил в эмуляторе лперы мобайл и увидел только фон страницы. 
body{
    background-color: #171814;  
    color: #C0D99F;
    font-size: 14px;
    text-decoration: none;
} 
.parent {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto; 
}
.block {
    width: 250px;
    height: 250px;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.button:before {
    left: 0;
}
.button:before, .button:after {
        content: "";
        height: 43px;
        position: absolute;
        top: 0;
        width: 6px;
}
.button:after {
    right: 0;
}
.button:before, .button:after {
        content: "";
        height: 43px;
        position: absolute;
        top: 0;
        width: 6px;
}

.button.green {
    background-color: #282C1E; 
}
.button.green:hover {
    background-color: #2E3322; 
}
.button {        
        font-size: 16px;
        height: 33px;
        margin: 0 auto 2px;
        position: relative;
        text-align: center;
        width: 100%;
    }
.marg_bot_5 {
    margin-bottom: 5px !important;
}
.green {
    color: #75B979 !important;
}
.input {
        border: 1px solid #1B1B1B;
        border-radius: 6px;
        height: 30px;
        margin: 10px 0;
        padding: 0 4px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        outline: medium none;
}
.button input {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: medium none;
        color: #C0D99F;
        cursor: pointer;
        display: block;
        font-size: 14px;
        height: 33px;
        padding: 7px 0 10px;
        position: relative;
        text-align: center;
        text-decoration: none;
        width: 100%;
}
.grey{ 
    color: #457721;
}


<html>
<head>
    <title>Авторизация</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="http://cache.localhost/css/login.css" title="default" />
</head>
<body>
<div class="parent">
    <div class="block">
        <form action="j_spring_security_check" class="typical-form" method="post">
                Логин:
                <input name="j_username" id="login" type="text"  class="input" placeholder="Логин">
                Пароль:
                <input name="j_password" type="password" id="password"  class="input" placeholder="Пароль">
                <div class="button green marg_bot_5">
                    <input type="submit" value="Войти">
                </div>
        </form>
        <p align="right"><a href="/reg" class="grey">Регистрация</a></p>
    </div>
</div>
</body>
</html>


Зарание спасибо

Вот как на пк
acb179de0ba24b33a4bfe0bf527f93da.png
а вот в емуляторе
2d59a955e4a346d6a97f8174bad63b4b.png

Ещё почему то цвета отличаются
  • Вопрос задан
  • 236 просмотров
3 комментария
Подписаться 1 Оценить 3 комментария
Решения вопроса 1
@vGrabko99 Автор вопроса
html, css, js, php, golang, mysql 
body{
    background-color: #171814;  
    color: #C0D99F;
    font-size: 14px;
    text-decoration: none;
} 
.parent {
    width: 50%; 
    margin: 0 auto; 
    text-align: left;
}


.block {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.button:before {
    left: 0;
}
.button:before, .button:after {
        content: "";
        height: 43px;
        position: absolute;
        top: 0;
        width: 6px;
}
.button:after {
    right: 0;
}
.button:before, .button:after {
        content: "";
        height: 43px;
        position: absolute;
        top: 0;
        width: 6px;
}

.button.green {
    background-color: #282C1E; 
}
.button.green:hover {
    background-color: #2E3322; 
}
.button {        
        font-size: 16px;
        height: 33px;
        margin: 0 auto 2px;
        position: relative;
        text-align: center;
        width: 100%;
    }
.marg_bot_5 {
    margin-bottom: 5px !important;
}
.green {
    color: #75B979 !important;
}
.input {
        border: 1px solid #1B1B1B;
        border-radius: 6px;
        height: 30px;
        margin: 10px 0;
        padding: 0 4px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        outline: medium none;

}
.button input {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: medium none;
        color: #C0D99F;
        cursor: pointer;
        display: block;
        font-size: 14px;
        height: 33px;
        padding: 7px 0 10px;
        position: relative;
        text-align: center;
        text-decoration: none;
        width: 100%;
}
.grey{ 
    color: #457721;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@WhiteSama
Мета тэги прописанны правильно?
Ответ написан
Комментировать
Комментировать
FoxPro111
@FoxPro111
добавь этот метатег

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Короткая цикличная анимация в Cinema 4D
07 мая 2024, в 17:11
2000 руб./за проект
Разработка парсера на Phyton
07 мая 2024, в 17:06
10000 руб./за проект
Создать комикс с помощью ИИ на заданную тему
07 мая 2024, в 17:00
30000 руб./за проект
Ещё заказы