时间戳

首页 > 解决方案 > 特定移动设备的媒体查询问题

html - 特定移动设备的媒体查询问题

问题描述

我最近一直在制作一个基于 The Witcher 传说的页面，只是为了学习一些关于 Web 开发和设计的概念，因为我有一些看起来很酷的想法并想尝试一下并继续努力。我一直在为主页上的响应性进行媒体查询，但我似乎无法确定类似于三星 Note 20 Ultra 的屏幕上的显示。我已经在许多不同的设备上测试了该页面，并且在绝大多数设备上看起来都不错，但无论我尝试了什么，我似乎都无法让 Note 20 Ultra 的主“章节”div 位于屏幕中央和其他一些类似大小的设备。我在调整笔记本电脑上的窗口大小时使用了最大宽度查询，有人建议我使用一些常规间隔，以及出现在检查器中 Google Chrome 开发工具上的 Note 20 Ultra 和其他设备的确切宽度和高度。在 devtools 上，屏幕看起来非常适合我查询的所有尺寸，包括 Note20Ultra 显示尺寸，但是当我在手机上打开页面时，它看起来一点也不像；主要的透明 div 在页面上显得非常高，而不是像 Chrome 检查窗口所建议的那样在中心。

这是html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Modern Witcher's Journal</title>
<link rel="stylesheet" href="index.css">
</head>
<body>

<script type="text/javascript" src="script.js"></script>




<!--<audio id="source" autoplay loop>
    <source src="C:\Users\user\AngularProjects\The ModernWitcher's Journal\audio\pages\home- 
page-theme.mp3">
</audio>-->



<div class="container">

    <br>
    <h1 class="homepage-title">
        <img src="images/witcher-transparent.png" alt="witcherLogo" 
        class="witcher-transparent-logo">
        The Modern Witcher's Journal
        <img src="images/witcher-transparent.png" alt="witcherLogo" 
        class="witcher-transparent-logo">
    </h1>
    <br>

    <div class="transparent-center-div">

        <br>
        <h2 class="sections-header">Chapters</h2>
        <br>

        <p class="sections-list">
            <button class="sections-list-buttons" id="bestiary" 
onClick="bestiaryClicked()">Bestiary</button>
            <br>
            <button class="sections-list-buttons" id="signs" onClick="signsClicked()">The 
Signs</button>
            <br>
            <button class="sections-list-buttons" id="alchemy" 
onclick="alchemyClicked()">Alchemy</button>
            <br>
            <button class="sections-list-buttons" id="map" onclick="mapClicked()">Map</button>
        </p>
        <br>
        <br>
    </div>
</div>

</body>
</html>

这些是基于我在网上找到的关于不同大型移动设备的显示尺寸的尺寸条件的 CSS 查询。最后两个用于Note 20Ultra（正常显示和水平翻转）。我在某些设备上遇到了问题，类似于我目前在使用 Note20（和其他类似尺寸的型号）时遇到的情况，但我总能找到解决它们的方法。我不太明白我做错了什么。感谢您的时间。

@media screen and (width: 1080px) and (height: 2340px)
{
.container .transparent-center-div
{
    bottom: 0;
    background: rgba(0, 0, 0, 0.342);
    color: rgb(228, 195, 5);
    border-radius: 1cm;
    margin-left: 3cm;
    margin-right: 3cm;
    margin-top: 60%;
    padding-top: 4cm;
    padding-bottom: 4cm;
    position: relative;
}

.sections-header
{
    font-size: 80px;
}

.sections-list-buttons
{
    font-size: 65px;
}

.homepage-title
{
    margin-top: 1cm;
    font-size: 75px;
}

.homepage-title .witcher-transparent-logo
{
    height: 50px;
    width: 50px;
}
}

@media screen and (width: 2316px) and (height: 1080px)
{
.container .transparent-center-div
{
    bottom: 0;
    background: rgba(0, 0, 0, 0.342);
    color: rgb(228, 195, 5);
    border-radius: 1cm;
    margin-left: 3cm;
    margin-right: 3cm;
    margin-top: 4%;
    padding-top: 4cm;
    padding-bottom: 4cm;
    position: relative;
}

.sections-header
{
    font-size: 50px;
}

.sections-list-buttons
{
    font-size: 35px;
}

.homepage-title
{
    margin-top: 1cm;
    font-size: 75px;
}

.homepage-title .witcher-transparent-logo
{
    height: 50px;
    width: 50px;
}
}

@media screen and (width: 1080px) and (height: 2316px)
{
.container .transparent-center-div
{
    bottom: 0;
    background: rgba(0, 0, 0, 0.342);
    color: rgb(228, 195, 5);
    border-radius: 1cm;
    margin-left: 3cm;
    margin-right: 3cm;
    margin-top: 60%;
    padding-top: 4cm;
    padding-bottom: 4cm;
    position: relative;
}

.sections-header
{
    font-size: 70px;
}

.sections-list-buttons
{
    font-size: 55px;
}

.homepage-title
{
    margin-top: 1cm;
    font-size: 75px;
}

.homepage-title .witcher-transparent-logo
{
    height: 50px;
    width: 50px;
}
}

检查时查看： 检查视图

在手机屏幕上查看： 在手机上查看

标签： htmlcssresponsive-designmedia-queriesresponsive

解决方案

在响应式设计中，设备的屏幕分辨率和视口大小之间存在差异。移动设备的屏幕分辨率可能是1920x1080，但它的视口大小（或 CSS 比率）可能是736x414px. 这取决于设备。有关视口大小的更多信息here和here。
在 CSS 中为响应式设计编写媒体查询时，您应该使用视口大小。在您的情况下，Note20 Ultra 的视口大小为412x883px。因此，您的媒体查询max-width应该是 for883px或最接近的“常见”分辨率1024px。您也可以使用这些尺寸在浏览器中测试您的网站。

其他几点需要注意：

  • 在您的代码中，断点是widthandheight而不是max-widthor max-height。所以它们可能不会在您的手机中被触发（手机的导航会降低屏幕高度）。它可能在您的浏览器中工作，因为您在 DevTools 中使用了确切的像素
  • 在响应式开发中，您可能不需要同时使用高度和宽度。您通常只会max-width使用常见的屏幕尺寸作为断点。

推荐阅读