无响应的网站 - 视口问题 - 页面显示在移动放大

我放在一起使用HTML和CSS的页眉，页面内容和页脚宽度为1170px（就像boostrap）一起添加宽度+边框+填充。无响应的网站 - 视口问题 - 页面显示在移动放大

我也在使用元标记视口。对于这个问题，我将它作为附件继续留在下面。

我期待的内容（标题，内容，页脚）适合手机上的视口（img 1），它在某些方面有所作为，但我注意到在某些设备中它实际上只显示部分内容并给我一个水平滚动条（img 2）。

Content View on Mobile

我一直在寻找了很多关于视口，但无法找到一个关于如何使它看起来像所有设备上的图1的解决方案。请指教。

您可以在ViewPort Test查看实时代码。我不会改变这一个。对于我将使用下面的测试，development

视口

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

CSS

*{ 
    margin:0; 
    padding:0; 
    border:0; 
    } 
    div.header, 
    div.content, 
    div.footer{ 
    width:100%; 
    } 
    div.header{ 
    background:blue; 
    } 
    div.content{ 
    background:orange; 
    } 
    div.footer{ 
    background:purple; 
    } 
    div.wrapper{ 
    width:1120px; 
    border:10px solid green; 
    padding:0 15px 0 15px; 
    margin:0 auto; 
    background:red; 
    }

HTML

<div class="header"> 
    <div class="wrapper"> 
     <h1>Header</div> 
    </div> 
</div> 
<div class="content"> 
    <div class="wrapper"> 
     <h1>Content</h1> 
    </div> 
</div> 
<div class="footer"> 
    <div class="wrapper"> 
     <h1>Footer</h1> 
    </div> 
</div>

来源

2014-09-03 Vinicius Santana

您可以考虑使用['MAX-width'（https://developer.mozilla.org/en- US/docs/Web/CSS/max-width）而不是'width'以获得更大的灵活性：'max-width：1120px'。 [工作示例]（http://jsfiddle.net/d9obnhyp/） – showdev 2014-09-03 21:02:42

也许你可以使用'em'单位。 – DaniP 2014-09-03 21:04:27

我简化了代码，让你们更容易看到问题，并考虑代码提供的是正确的@showdev。问题是我将在这些包装器中包含内容，并且内容应该占据所有的水平空间（1140px）。请记住，我不打算做出响应。我想要的只是让网站看起来像它在桌面上，但适合屏幕。 – 2014-09-03 21:43:53

如果你没有使用媒体查询和你那么只需要1170像素宽的固定布局来填充手机屏幕更改此设置：

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

这样：

<meta name="viewport" content="width=1170">

来源

2014-09-03 21:59:01

考虑到这是一个无响应的网站所有的元标记视需要它的网站宽度，在我的情况下，1170px。元标记视现在看起来是这样的：

<meta name=viewport content="width=1170">

来源

2014-09-03 22:01:05

伟大的东西，但是，我发现，如果你是在桌面上和视口被设置为静态宽度的背景可能无法在屏幕的部分呈现横向滚动时不显示。

要解决这个非响应页面只需添加一个最小宽度的身体。

body { 
    min-width: 1170px; 
}

注意，这是除了设置视口的静态宽度

<meta name=viewport content="width=1170">

来源

2015-12-02 18:46:51 developernator

无响应的网站 - 视口问题 - 页面显示在移动放大

回答

相关问题