为啥我的简单媒体查询在模拟手机时会产生滚动条[重复]

Posted

技术标签:

【中文标题】为啥我的简单媒体查询在模拟手机时会产生滚动条[重复]【英文标题】：Why my simple media queries produce scroll bars when emulating a mobile phone [duplicate]为什么我的简单媒体查询在模拟手机时会产生滚动条[重复] 【发布时间】：2014-07-25 17:39:28 【问题描述】：

我正在玩媒体查询并且我有一个空白的正文标签，尽管当我使用谷歌浏览器和仿真选项来复制三星 S2 时，即使没有内容，我也可以看到滚动条。任何想法为什么我得到滚动条？ 谢谢，

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link rel="stylesheet" href="css/mobile.css" type="text/css" media="all" />
  </head>
<body>
</body>
</html>

来自 MOBILE.CSS 的 CSS

@media only screen and (max-device-width: 480px) 
    body

滚动条的屏幕截图

【问题讨论】：

【参考方案1】：

手机提供比实际屏幕“更大”的视口。 将视口元数据添加到头部，它应该可以工作：

<head> ....
   <meta name="viewport" content="width=device-width">
   ... 
</head>

一个视觉理解的例子：

或者作为playalong代码：

<html>
<head>
    <title>Viewport on Smartphone and Desktop</title>
    <!-- without width = device width smartphones show full page but small as in overview zoom -->
    <!-- disable this automatic scaling -->
    <meta name="viewport" content="width=device-width">
</head>
<body>
<style>
    html, body 
        margin: 0;
        padding: 0;
        background-color: #EDECEC;
    

    p 
        padding: 30px 0;
        margin: 30px 0;
        text-align: center;
        font-family: sans-serif;
        font-size: 300%;
    
    .ausgabe
        font-size: 150%;
    

    .pixel 
        width: 320px;
        background-color: #6B5B69;
        color: #fff;
    

    .prozent 
        width: 100%;
        background-color: #D06836;
        color: #F8F8F8;
    
</style>
<p class="pixel">320px</p>

<p class="prozent">100%</p>

<p class="ausgabe"></p>
<script>

    var metaList = document.getElementsByTagName( 'meta' ),
            metaFlag = false,
            devWidth = window.screen.width,
            browserWidth = document.documentElement.clientWidth;

    if ( metaList.length > 0 && metaList[0].name == 'viewport' && metaList[0].content == 'width=device-width' ) 
        metaFlag = true;
    
    document.getElementsByClassName( 'ausgabe' )[0].innerHTML = 'width=device-width: ' + metaFlag + '<br/>' +
            'Device Width: ' + devWidth + '<br/>' + 'Browser Width: ' + browserWidth;
</script>
</body>
</html>

【讨论】：

Lools 很棒，但是您如何引用具有适用于移动设备或桌面设备的正确设置的 css 文件？我不清楚对外部 css 文件的引用看起来如何谢谢 1.使用带有视口的元标记，2. 它应该与 &lt;link rel="stylesheet" media="screen and (max-width: 400px)" href="mobile.css" /&gt;&lt;link rel="stylesheet" media="screen and (min-width: 401px)" href="desktop.css" /&gt; 一起使用。您可能会发现这篇文章很有用：css-tricks.com/resolution-specific-stylesheets。不幸的是，它会加载两个文件，但只需应用正确的文件。如果你调整浏览器窗口的大小，你会看到具体的设计规则。

以上是关于为啥我的简单媒体查询在模拟手机时会产生滚动条[重复]的主要内容，如果未能解决你的问题，请参考以下文章

为啥在 HTML Canvas 下方添加小 div 时会出现水平滚动条？

聊天页面使用uniapp框架时，向上下拉时会产生闪屏现象

为啥 iframe 比 body 大？ iframe在100vh时添加垂直滚动条[重复]

为啥 UITableView 滚动时会更新约束？

CSS媒体查询问题（滚动条）

媒体查询断点忽略 html min-width [重复]