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

Question

我正在网页上工作以在手机上显示页面的响应版本

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

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

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

Answer 1

我认为您需要插入此metatag，否则它会显示整个页面。

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

Here you can read about this meta tag

希望这有帮助

Answer 2

您应该使用媒体查询。无论如何都可以。

一个简单的例子是：

.banner {
    width:1024px;
}

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

Answer 3

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

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

这对你来说是否足够了？

古德勒克！

Answer 4

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

元检查this

的部分

并检查此

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

但如果您使用Adobe Dream Weaver它将根据设备调整响应。

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