响应式 css 显示网页的移动版本答案

【问题标题】：Responsive css to display mobile version of the webpage响应式 css 显示网页的移动版本
【发布时间】：2014-04-11 18:15:14
【问题描述】：

我正在开发一个网页以在手机上显示该页面的响应版本

当我在 PC 中调整浏览器窗口的大小时，它显示得很好，但是当我从手机打开页面时，它只显示整个页面，而不是像在调整大小时在 pc 上那样显示更简单的移动版本

我没有使用任何媒体或元标记。我只是使用百分比值..

如果我也应该使用媒体或元或视口或类似的东西来控制移动视图，有什么建议吗？

【问题讨论】：

hi user@Junaid Ali 如果您的网站属于 html/java/php 使用 Adobe DreamWever，它将在短时间内在所有设备上正常工作..

【解决方案1】：

我认为您需要插入此元标记，否则它将显示整个页面。

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

希望对你有帮助

【讨论】：

【解决方案2】：

您应该使用媒体查询。无论如何，这将起作用。

一个简单的例子是：

.banner {
    width:1024px;
}

@media screen and (max-width:420px) {
    .banner {
        width:420px;
    }
}

【讨论】：

【解决方案3】：

添加视口元标记并使用媒体查询。
将 %'s 赋予元素使元素可扩展，这并不意味着手机上的浏览器知道它必须缩小。这是通过媒体查询处理的。

CSS-tricks 是一个很好的网站，可以学习和阅读有关媒体查询的更多信息：http://css-tricks.com/css-media-queries/
我建议先阅读它，然后尝试它，如果你不能让它工作......把它发布到 Stack ^.^

这对你来说是一个足够的答案吗？

祝你好运！

【讨论】：

我发现这个答案对我的问题最准确和相关:) 我会试试这个，让你知道它是否对我有用（y）
是的，祝你好运。如果您需要更多帮助，请随时提出！
问题似乎与视口元标记有关，但我无权修改网页的 html。相反，我发现我可以在 css 中使用 @viewport 来达到同样的目的，但我无法让它显示输出
如果我是对的，viewport 元标记会启用媒体查询。如果它在带有@viewport 的 CSS 中也能正常工作，请尝试通过调整 @viewport 标记内的尺寸来使 1 个元素（如
）可缩小。
这一切都用元标记修复了 :) 我让网站管理员将标记添加到 HTML 中，之后所有代码都运行良好 :) 非常感谢兄弟 :)

【解决方案4】：

根据响应布局我不知道您使用了哪种技术和脚本 (java,.net,php)

对于部分元检查this

还要检查一下

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

但是如果你使用Adobe Dream Weaver它会根据设备调整响应。

如果您使用的是 android Mobile 请检查天气您的浏览器处于哪种模式（移动或桌面）。如果它在桌面将其更改为移动

【讨论】：