如何让我的网站在移动设备上看起来与调整后的Google Chrome窗口一样?

时间:2016-10-16 02:04:36

标签: visual-web-developer

我必须调整HTML网站才能在MediaWiki上运行。该网站位于http://2016.igem.org/Team:UrbanTundra_Edmonton。起初有很多错误,因为MediaWiki基本上将你限制在一个文本编辑器中来完成你所有的工作,而不是只在服务器上安装.HTML文件。但是,我能够修复大部分错误。唯一的,也许是最严重的错误是网站的响应能力。

例如,如果您在Google Chrome浏览器窗口中调整网站大小,则该网站会表现得很好。但是,当您在手机上打开同一个网站时,导航切换会移出屏幕,并且总体布局会崩溃。与我乏善可陈的描述相比,通过不同的媒介查看网站将提供更好的理解。

在我决定来这里寻求帮助之前,这实际上是一个更大的问题。我基本上在Chrome中使用'Inspect Element'来改变一堆填充和边距值,以使一切看起来不错。确实,在经过调整大小的Chrome窗口中,它看起来很不错。

然后我尝试使用Chrome的移动模拟器(内置于开发工具中)并使用我的试错法无济于事。

我想知道是否有人可以帮助我,或者至少给我一些关于我如何拍摄的提示是在调整大小的Chrome窗口上看到的,并在移动设备上显示?

1 个答案:

答案 0 :(得分:0)

找到答案!我的元标记如下:

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

我实际上只需要添加用户可伸缩参数并将其设置为no!所以知道它的内容如下:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;" />

现在一切都像预期的那样!