视口未被识别答案

【问题标题】：Viewport not being recognized视口未被识别
【发布时间】：2015-05-04 08:31:14
【问题描述】：

我正在努力使网站适合移动设备，当我为视口添加元标记时，它根本无法识别它。

我仍在处理媒体查询，但视口根本没有做任何事情。

网站：http://gc200298785.computerstudi.es/test/

源码：view-source:http://gc200298785.computerstudi.es/test/

提前感谢您！凯莉

【问题讨论】：

标签： css viewport

【解决方案1】：

它只是工作正常。我注意到了你的 CSS。

@media screen and (max-width: 320px) { 
/*main*/
body {
    font-size: 16px;
    line-height: none;
    width: 100%;
}
.container {
    max-width: 90%;
    padding: none;
    margin: 0 auto;
}
a .inside-container {
    max-width: 25%;
}
nav {
    width: 25%;
}
nav li{
    display: inline;
}
#menu {
    max-width: 100%;
}

}

在您的 CSS 代码下方添加

.container, #paper, #landing, #paper-bottom{width 100%;}

【讨论】：

@anglimmass 即使在添加之后，在我的手机上仍然看起来像这样。 i.imgur.com/BlZ7zK7.png
我也从谷歌移动友好测试中得到了这个。 "Size content to viewport 页面内容对于视口来说太宽，迫使用户水平滚动。将页面内容调整到视口以提供更好的用户体验。页面内容是 1,142 CSS 像素宽，但视口只有320 CSS 像素宽。以下元素位于视口之外："

【解决方案2】：

尝试添加；

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

此外，最佳做法是将您的 CSS 启动为移动/响应式，也就是说不要将其包装在媒体查询中。

然后对于桌面在主要的移动/响应式 css 下启动媒体查询

@media screen and (min-width: 800px) //or what ever size you want {
// insert your styles here
}

您会发现以这种方式进行开发要容易得多。

【讨论】：

感谢马克的建议，这已经是一个现有的网站。如果我构建了它，我会一开始就让它响应。