HTML не отображается должным образом в мобильном браузере - PullRequest
Новая
       34

HTML не отображается должным образом в мобильном браузере

0 голосов
/ 10 ноября 2018

Я новичок в веб-разработке, и я только что закончил свой первый сайт: www.aviakassir.az Но я сталкиваюсь с проблемой, когда пытаюсь открыть свой сайт на мобильном устройстве. Некоторая часть моего заголовка вообще не отображается (строка с контактами и языками вверху). Меню разделено на две части и поисковый скрипт расположен внизу изображения. 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="Onlayn biletlerin alisi, hotel rezervasiya, aviakassir">
    <meta name="keywords" content="onlayn aviabilet, aviabilet, turizm, seyahet, aviakassir">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aviakassir</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/hover-min.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/chosen.min.css">
    <link rel="stylesheet" href="css/jquery-customselect.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/assets/revolution/layers.css">
    <link rel="stylesheet" href="css/assets/revolution/navigation.css">
    <link rel="stylesheet" href="css/assets/revolution/settings.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>

Что я здесь пропустил? Вот как выглядит моя страница в мобильном Chrome: enter image description here

1 Ответ

0 голосов
/ 10 ноября 2018

Убедитесь, что ваши веб-страницы responseive.css можно просматривать с разных устройств: настольных компьютеров, планшетов и телефонов. Ваша веб-страница должна хорошо выглядеть и быть простой в использовании, независимо от устройства. Веб-страницы не должны пропускать информацию для устройств меньшего размера, а должны адаптировать ее контент для любого устройства. Это называется адаптивным веб-дизайном, когда вы используете CSS и HTML для изменения размера, скрытия, сокращения, увеличения или перемещения контента, чтобы он выглядел. хорошо на любом экране 

@media only screen and (max-width: 767px)
.header-top-left {
    display: none;
}

set display: block;
...