Question

我是网络开发的新手，我刚刚完成了我的第一个网站：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中的外观：

Answer 1

检查您的active.css网页可以使用许多不同的设备进行查看：台式机，平板电脑和电话。无论使用哪种设备，您的网页都应该看起来不错，并且易于使用。网页不应遗漏信息以适合较小的设备，而应使其内容适合任何设备。当您使用CSS和HTML调整大小，隐藏，缩小，放大或移动内容以使其外观时，它称为响应式网页设计。在任何屏幕上都很好

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

set display: block;

HTML无法在移动浏览器上正确显示

1 个答案: