时间戳

首页 > 解决方案 > 媒体查询无法在其他设备屏幕上正确显示页面

html - 媒体查询无法在其他设备屏幕上正确显示页面

问题描述

我浏览了与此标题相关的所有问题并应用了许多建议的解决方案。信息量最大的是link1 link2 link3。他们都没有工作。当我调整浏览器大小时，我看不到外部元素。我只想能够在其他设备屏幕上正确显示我的网站。例如，当我将浏览器屏幕的宽度减半时，我看不到网站的另一半。

这是我的代码片段：

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

    #homepage {
            position: absolute;
            width: 100%;
            max-width: 1920px;
            height: 4770px;
            background-color: rgba(255,255,255,1);
            overflow: hidden;
            --web-view-name: Ging Games- Home;
            --web-view-id: homepage;
            --web-scale-on-resize: true;
            --web-enable-deep-linking: true;
            
        }
        @media screen and (max-width: 780px) {
      .homepage{
        width: 100%;
        position: absolute;
        height: 4770px;
        background-color: rgba(255,255,255,1);
        overflow: hidden;
        --web-view-name: Games- Home;
        --web-view-id: homepage;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
      }
    }
    
    @media screen and (max-width: 375px) {
      .homepage {
        width: 100%;
        position: absolute;
        height: 4770px;
        background-color: rgba(255,255,255,1);
        overflow: hidden;
        --web-view-name: Games- Home;
        --web-view-id: homepage;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
      }
    }
    
    @media screen and (max-width: 320px) {
      .homepage {
        width: 100%;
        position: absolute;
        height: 4770px;
        background-color: rgba(255,255,255,1);
        overflow: hidden;
        --web-view-name: Games- Home;
        --web-view-id: homepage;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
      }
    }

    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script type="text/javascript" src="css3-mediaqueries.js"></script>

从我已经应用的其他 StackOverflow 解决方案建议：

附加信息：我使用这个网站来托管我的网站。

标签： htmlcss

解决方案

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

 <style>
 #homepage {
    position: absolute;
    width: 100%;
    max-width: 1920px;
    background-color: rgba(255,255,255,1);   
    }

 /* Ex. Large desktop */
 @media (min-width: 1280px){

   .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
    }

 }

 /* Large desktop */
 @media (min-width: 980px) and (max-width: 1280px){

    .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
    }

 }  

 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 979px) {

    .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
    }

 }

 /* Landscape phone to portrait tablet */
 @media (max-width: 767px) {

    .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
    }

 }

 /* Landscape phones and down */
 @media (max-width: 480px) {

    .homepage{
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,1);
   }

 }  
 </style>

 <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 <script type="text/javascript" src="css3-mediaqueries.js"></script>

请记住，对于最大宽度 480 像素和 767 像素，如果您有一个导航栏类，请声明 display = block(即 display:block; )，而其他应该是 none(即 display:none;)

推荐阅读